sliders page

bower.json

@@ -47,7 +47,8 @@
     "angular-chart.js": "~0.8.8",
     "angular-chartist.js": "~3.3.12",
     "angular-morris-chart": "~1.1.0",
-    "angular-ui-tree": "~2.12.0"
+    "angular-ui-tree": "~2.12.0",
+    "ionrangeslider": "~2.1.2"
   },
   "overrides": {
     "amcharts": {

src/app/pages/pages.module.js

@@ -21,6 +21,7 @@
     'BlurAdmin.pages.notifications',
     'BlurAdmin.pages.profile',
     'BlurAdmin.pages.progressBars',
+    'BlurAdmin.pages.slider',
     'BlurAdmin.pages.tables',
     'BlurAdmin.pages.tree',
     'BlurAdmin.pages.typography'

src/app/pages/slider/slider.html

@@ -0,0 +1,96 @@
+<div class="row">
+  <div class="col-md-12">
+    <blur-panel title="Ion Range Slider" class-container="with-scroll">
+      <div>
+        <h5>Basic</h5>
+        <ion-slider type="single"
+                    grid="false"
+                    min="0"
+                    max="100"
+                    from="45"
+                    disable="false">
+        </ion-slider>
+      </div>
+      <div>
+        <h5>With prefix</h5>
+        <ion-slider type="single"
+                    grid="true"
+                    min="100"
+                    max="1200"
+                    prefix="$"
+                    from="420"
+                    disable="false">
+        </ion-slider>
+      </div>
+      <div>
+        <h5>With postfix</h5>
+        <ion-slider type="single"
+                    grid="true"
+                    min="-90"
+                    max="90"
+                    postfix="°"
+                    from="36"
+                    disable="false">
+        </ion-slider>
+      </div>
+      <div>
+        <h5>Two way range</h5>
+        <ion-slider type="double"
+                    grid="true"
+                    min="100"
+                    max="1200"
+                    from="420"
+                    to="900"
+                    disable="false">
+        </ion-slider>
+      </div>
+      <div>
+        <h5>With Steps</h5>
+        <ion-slider type="single"
+                    grid="true"
+                    min="0"
+                    max="1000"
+                    from="300"
+                    step="50"
+                    disable="false">
+        </ion-slider>
+      </div>
+      <div>
+        <h5>Decorating numbers</h5>
+        <ion-slider type="single"
+                    grid="true"
+                    min="0"
+                    max="1000000"
+                    from="300000"
+                    step="1000"
+                    prettify-separator="."
+                    prettify="true"
+                    disable="false">
+        </ion-slider>
+      </div>
+      <div>
+        <h5>Using custom values array</h5>
+        <ion-slider type="single"
+                    grid="true"
+                    from="5"
+                    step="1000"
+                    values="['January', 'February', 'March',
+                            'April', 'May', 'June',
+                            'July', 'August', 'September',
+                            'October', 'November', 'December']"
+                    disable="false">
+        </ion-slider>
+      </div>
+      <div>
+        <h5>Disabled</h5>
+        <ion-slider type="single"
+                    grid="false"
+                    min="0"
+                    max="100"
+                    from="45"
+                    disable="true">
+        </ion-slider>
+      </div>
+    </blur-panel>
+  </div>
+</div>

src/app/pages/slider/slider.module.js

@@ -0,0 +1,20 @@
+/**
+ * @author a.demeshko
+ * created on 12/22/15
+ */
+(function () {
+  'use strict';
+
+  angular.module('BlurAdmin.pages.slider', [])
+    .config(routeConfig);
+
+  /** @ngInject */
+  function routeConfig($stateProvider) {
+    $stateProvider
+      .state('slider', {
+        url: '/slider',
+        templateUrl: 'app/pages/slider/slider.html'
+      });
+  }
+
+})();

src/app/theme/components/contentTop/contentTop.directive.js

@@ -35,6 +35,7 @@
           '/profile': 'User Profile',
           '/tables': 'Tables',
           '/tree': 'Tree View',
+          '/slider': 'Sliders',
           '/typography': 'Typography',
           '/form-layouts': 'Form Layouts',
           '/form-inputs': 'Form Inputs',

src/app/theme/components/sidebar/SidebarCtrl.js

@@ -96,6 +96,10 @@
           {
             title: 'Tree View',
             root: '#/tree'
+          },
+          {
+            title: 'Sliders',
+            root: '#/slider'
           }
         ]
       },

src/app/theme/directives/ionSlider.js

@@ -0,0 +1,91 @@
+/**
+ * @author a.demeshko
+ * created on 22.12.2015
+ */
+(function () {
+  'use strict';
+
+  angular.module('BlurAdmin.theme')
+    .directive('ionSlider', ionSlider);
+
+  /** @ngInject */
+  function ionSlider($timeout) {
+    return {
+      restrict: 'EA',
+      template: '<div></div>',
+      replace: true,
+      scope: {
+        min: '=',
+        max: '=',
+        type: '@',
+        prefix: '@',
+        maxPostfix: '@',
+        prettify: '=',
+        prettifySeparator: '@',
+        grid: '=',
+        gridMargin: '@',
+        postfix: '@',
+        step: '@',
+        hideMinMax: '@',
+        hideFromTo: '@',
+        from: '=',
+        to: '=',
+        disable: '=',
+        onChange: '=',
+        onFinish: '=',
+        values: '='
+      },
+      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
+          });
+        })();
+        $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});
+          });
+        });
+      }
+    };
+  }
+
+})();