refactor(sliders): add timeout on init

src/app/pages/ui/slider/slider.html

@@ -8,7 +8,8 @@
                     min="0"
                     max="100"
                     from="45"
-                    disable="false">
+                    disable="false"
+                    timeout="300">
         </ion-slider>
       </div>
       <div>
@@ -19,7 +20,8 @@
                     max="1200"
                     prefix="$"
                     from="420"
-                    disable="false">
+                    disable="false"
+                    timeout="300">
         </ion-slider>
       </div>
       <div>
@@ -30,7 +32,8 @@
                     max="90"
                     postfix="°"
                     from="36"
-                    disable="false">
+                    disable="false"
+                    timeout="300">
         </ion-slider>
       </div>
       <div>
@@ -41,7 +44,8 @@
                     max="1200"
                     from="420"
                     to="900"
-                    disable="false">
+                    disable="false"
+                    timeout="300">
         </ion-slider>
       </div>
       <div>
@@ -52,7 +56,8 @@
                     max="1000"
                     from="300"
                     step="50"
-                    disable="false">
+                    disable="false"
+                    timeout="300">
         </ion-slider>
       </div>
       <div>
@@ -65,7 +70,8 @@
                     step="1000"
                     prettify-separator="."
                     prettify="true"
-                    disable="false">
+                    disable="false"
+                    timeout="300">
         </ion-slider>
       </div>
       <div>
@@ -78,7 +84,8 @@
                             'April', 'May', 'June',
                             'July', 'August', 'September',
                             'October', 'November', 'December']"
-                    disable="false">
+                    disable="false"
+                    timeout="300">
         </ion-slider>
       </div>
       <div>
@@ -88,7 +95,8 @@
                     min="0"
                     max="100"
                     from="45"
-                    disable="true">
+                    disable="true"
+                    timeout="300">
         </ion-slider>
       </div>
     </div>

src/app/theme/directives/ionSlider.js

@@ -33,31 +33,35 @@
         disable: '=',
         onChange: '=',
         onFinish: '=',
-        values: '='
+        values: '=',
+        timeout: '@'
       },
       link: function ($scope, $element) {
         (function init() {
-          $element.ionRangeSlider({
-            min: $scope.min,
-            max: $scope.max,
-            type: $scope.type,
-            prefix: $scope.prefix,
-            maxPostfix: $scope.maxPostfix,
-            prettify_enabled: $scope.prettify,
-            prettify_separator: $scope.prettifySeparator,
-            grid: $scope.grid,
-            gridMargin: $scope.gridMargin,
-            postfix: $scope.postfix,
-            step: $scope.step,
-            hideMinMax: $scope.hideMinMax,
-            hideFromTo: $scope.hideFromTo,
-            from: $scope.from,
-            to: $scope.to,
-            disable: $scope.disable,
-            onChange: $scope.onChange,
-            onFinish: $scope.onFinish,
-            values: $scope.values
-          });
+          var timeout = $scope.timeout || 0;
+          $timeout(function(){
+            $element.ionRangeSlider({
+              min: $scope.min,
+              max: $scope.max,
+              type: $scope.type,
+              prefix: $scope.prefix,
+              maxPostfix: $scope.maxPostfix,
+              prettify_enabled: $scope.prettify,
+              prettify_separator: $scope.prettifySeparator,
+              grid: $scope.grid,
+              gridMargin: $scope.gridMargin,
+              postfix: $scope.postfix,
+              step: $scope.step,
+              hideMinMax: $scope.hideMinMax,
+              hideFromTo: $scope.hideFromTo,
+              from: $scope.from,
+              to: $scope.to,
+              disable: $scope.disable,
+              onChange: $scope.onChange,
+              onFinish: $scope.onFinish,
+              values: $scope.values
+            });
+          }, timeout);
         })();
         $scope.$watch('min', function (value) {
           $timeout(function () {

src/sass/theme/dashboard/_todo.scss

@@ -128,6 +128,7 @@ body.badmin-transparent {
     width: calc(100% - 25px);
     opacity: 0.9;
     border: none;
+    background: transparent;
     &:focus {
       outline: none;
       background-color: transparent;

src/sass/theme/skins/_02_transparent.scss

@@ -25,4 +25,7 @@ body.badmin-transparent {
   .form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
     @include placeholderStyle($default, 0.6);
   }
+  .irs-grid-text {
+    color: $default;
+  }
 }