update with new examples for 5.8 release

demo.js

@@ -419,6 +419,22 @@ app.controller('MainCtrl', function ($scope, $rootScope, $timeout, $modal) {
     }
   };
 
+  var dates = [];
+  for (var i = 1; i <= 31; i++) {
+    dates.push(new Date(2016, 7, i));
+  }
+  $scope.slider_dates = {
+    value: new Date(2016, 7, 10),
+    options: {
+      stepsArray: dates,
+      translate: function(date) {
+        if (date != null)
+          return date.toDateString();
+        return '';
+      }
+    }
+  };
+
   //Slider with draggable range
   $scope.slider_draggable_range = {
     minValue: 1,
@@ -513,11 +529,15 @@ app.controller('MainCtrl', function ($scope, $rootScope, $timeout, $modal) {
 
   //Disabled slider
   $scope.disabled_slider = {
-    value: 50,
+    minValue: 20,
+    maxValue: 80,
     options: {
       floor: 0,
       ceil: 100,
-      disabled: true
+      step: 10,
+      disabled: true,
+      showTicks: true, // just to show the disabled style
+      draggableRange: true // just to show the disabled style
     }
   };
 

index.html

@@ -360,6 +360,15 @@
     </tabset>
   </article>
 
+  <article>
+    <h2>Slider with Date values</h2>
+    <rzslider
+      rz-slider-model="slider_dates.value"
+      rz-slider-options="slider_dates.options"
+    ></rzslider>
+    <show-code js-file="slider_dates" html-file="singleSlider"></show-code>
+  </article>
+
   <article>
     <h2>Slider with draggable range</h2>
     <rzslider
@@ -415,7 +424,8 @@
     <h2>Disabled slider</h2>
     <label>Disabled <input type="checkbox" ng-model="disabled_slider.options.disabled"></label>
     <rzslider
-      rz-slider-model="disabled_slider.value"
+      rz-slider-model="disabled_slider.minValue"
+      rz-slider-high="disabled_slider.maxValue"
       rz-slider-options="disabled_slider.options"
     ></rzslider>
     <show-code js-file="disabled_slider" html-file="disabled_slider"></show-code>

snippets/slider_dates.js

+var dates = [];
+for (var i = 1; i <= 31; i++) {
+  dates.push(new Date(2016, 7, i));
+}
+$scope.slider = {
+  value: dates[0], // or new Date(2016, 7, 10) is you want to use different instances
+  options: {
+    stepsArray: dates,
+    translate: function(date) {
+      if (date != null)
+        return date.toDateString();
+      return '';
+    }
+  }
+};