refactor(sliders): draw template for slider before they created

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

@@ -1,7 +1,7 @@
 <div class="row">
   <div class="col-md-12">
     <div ba-panel ba-panel-title="Ion Range Slider" ba-panel-class="with-scroll">
-      <div>
+      <div class="slider-box">
         <h5>Basic</h5>
         <ion-slider type="single"
                     grid="false"
@@ -9,10 +9,10 @@
                     max="100"
                     from="45"
                     disable="false"
-                    timeout="2010">
+                    timeout="150">
         </ion-slider>
       </div>
-      <div>
+      <div class="slider-box">
         <h5>With prefix</h5>
         <ion-slider type="single"
                     grid="true"
@@ -21,10 +21,10 @@
                     prefix="$"
                     from="420"
                     disable="false"
-                    timeout="2010">
+                    timeout="150">
         </ion-slider>
       </div>
-      <div>
+      <div class="slider-box">
         <h5>With postfix</h5>
         <ion-slider type="single"
                     grid="true"
@@ -33,10 +33,10 @@
                     postfix="°"
                     from="36"
                     disable="false"
-                    timeout="2010">
+                    timeout="150">
         </ion-slider>
       </div>
-      <div>
+      <div class="slider-box">
         <h5>Two way range</h5>
         <ion-slider type="double"
                     grid="true"
@@ -45,10 +45,10 @@
                     from="420"
                     to="900"
                     disable="false"
-                    timeout="2010">
+                    timeout="150">
         </ion-slider>
       </div>
-      <div>
+      <div class="slider-box">
         <h5>With Steps</h5>
         <ion-slider type="single"
                     grid="true"
@@ -57,10 +57,10 @@
                     from="300"
                     step="50"
                     disable="false"
-                    timeout="2010">
+                    timeout="150">
         </ion-slider>
       </div>
-      <div>
+      <div class="slider-box">
         <h5>Decorating numbers</h5>
         <ion-slider type="single"
                     grid="true"
@@ -71,10 +71,10 @@
                     prettify-separator="."
                     prettify="true"
                     disable="false"
-                    timeout="2010">
+                    timeout="150">
         </ion-slider>
       </div>
-      <div>
+      <div class="slider-box">
         <h5>Using custom values array</h5>
         <ion-slider type="single"
                     grid="true"
@@ -85,10 +85,10 @@
                             'July', 'August', 'September',
                             'October', 'November', 'December']"
                     disable="false"
-                    timeout="2010">
+                    timeout="150">
         </ion-slider>
       </div>
-      <div>
+      <div class="slider-box">
         <h5>Disabled</h5>
         <ion-slider type="single"
                     grid="false"
@@ -96,7 +96,7 @@
                     max="100"
                     from="45"
                     disable="true"
-                    timeout="2010">
+                    timeout="150">
         </ion-slider>
       </div>
     </div>

src/app/theme/directives/ionSlider.js

@@ -61,33 +61,34 @@
               onFinish: $scope.onFinish,
               values: $scope.values
             });
+
+            $scope.$watch('min', function (value) {
+              $timeout(function () {
+                $element.data("ionRangeSlider").update({min: value});
+              });
+            }, true);
+            $scope.$watch('max', function (value) {
+              $timeout(function () {
+                $element.data("ionRangeSlider").update({max: value});
+              });
+            });
+            $scope.$watch('from', function (value) {
+              $timeout(function () {
+                $element.data("ionRangeSlider").update({from: value});
+              });
+            });
+            $scope.$watch('to', function (value) {
+              $timeout(function () {
+                $element.data("ionRangeSlider").update({to: value});
+              });
+            });
+            $scope.$watch('disable', function (value) {
+              $timeout(function () {
+                $element.data("ionRangeSlider").update({disable: value});
+              });
+            });
           }, timeout);
         })();
-        $scope.$watch('min', function (value) {
-          $timeout(function () {
-            $element.data("ionRangeSlider").update({min: value});
-          });
-        }, true);
-        $scope.$watch('max', function (value) {
-          $timeout(function () {
-            $element.data("ionRangeSlider").update({max: value});
-          });
-        });
-        $scope.$watch('from', function (value) {
-          $timeout(function () {
-            $element.data("ionRangeSlider").update({from: value});
-          });
-        });
-        $scope.$watch('to', function (value) {
-          $timeout(function () {
-            $element.data("ionRangeSlider").update({to: value});
-          });
-        });
-        $scope.$watch('disable', function (value) {
-          $timeout(function () {
-            $element.data("ionRangeSlider").update({disable: value});
-          });
-        });
       }
     };
   }

src/sass/app/_slider.scss

@@ -0,0 +1,3 @@
+.slider-box{
+  min-height: 86px;
+}