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,10 +33,13 @@
         disable: '=',
         onChange: '=',
         onFinish: '=',
-        values: '='
+        values: '=',
+        timeout: '@'
       },
       link: function ($scope, $element) {
         (function init() {
+          var timeout = $scope.timeout || 0;
+          $timeout(function(){
             $element.ionRangeSlider({
               min: $scope.min,
               max: $scope.max,
@@ -58,6 +61,7 @@
               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;
+  }
 }