Update demo site

demo.js

@@ -95,6 +95,22 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
     }
   };
 
+  //Slider with selection bar
+  $scope.color_slider_pointer = {
+    value: 12,
+    options: {
+      getPointerColor: function(value) {
+        if (value <= 3)
+          return 'red';
+        if (value <= 6)
+          return 'orange';
+        if (value <= 9)
+          return 'yellow';
+        return '#2AE02A';
+      }
+    }
+  };
+
   //Slider config with floor, ceil and step
   $scope.slider_floor_ceil = {
     value: 12,
@@ -105,6 +121,17 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
     }
   };
 
+  //Slider config with rtl
+  $scope.slider_rtl = {
+    value: 20,
+    options: {
+      floor: 10,
+      ceil: 100,
+      step: 5,
+      rightToLeft: true
+    }
+  };
+
   //Slider config with floating values
   $scope.slider_float = {
     value: 0.5,
@@ -427,7 +454,8 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
       readOnly: false,
       disabled: false,
       showTicks: false,
-      showTicksValues: false
+      showTicksValues: false,
+      rightToLeft: false
     }
   };
   $scope.toggleHighValue = function() {

index.html

@@ -109,7 +109,7 @@
   </article>
 
   <article>
-    <h2>Slider with dynamic selection bar colors</h2>
+    <h2>Slider with dynamic selection bar color</h2>
     <rzslider
       rz-slider-model="color_slider_bar.value"
       rz-slider-options="color_slider_bar.options"
@@ -117,6 +117,15 @@
     <show-code js-file="color_slider_bar" html-file="singleSlider"></show-code>
   </article>
 
+  <article>
+    <h2>Slider with dynamic pointer color</h2>
+    <rzslider
+      rz-slider-model="color_slider_pointer.value"
+      rz-slider-options="color_slider_pointer.options"
+    ></rzslider>
+    <show-code js-file="color_slider_pointer" html-file="singleSlider"></show-code>
+  </article>
+
   <article>
     <h2>Slider with custom floor/ceil/step</h2>
     <rzslider
@@ -126,6 +135,15 @@
     <show-code js-file="slider_floor_ceil" html-file="singleSlider"></show-code>
   </article>
 
+  <article>
+    <h2>Right to left slider</h2>
+    <rzslider
+      rz-slider-model="slider_rtl.value"
+      rz-slider-options="slider_rtl.options"
+    ></rzslider>
+    <show-code js-file="slider_rtl" html-file="singleSlider"></show-code>
+  </article>
+
   <article>
     <h2>Slider with floating values</h2>
     <rzslider
@@ -361,7 +379,8 @@
         <label>Show ticks values <input type="checkbox"
                                         ng-model="slider_all_options.options.showTicksValues"></label><br/>
         <label>Disabled <input type="checkbox" ng-model="slider_all_options.options.disabled"></label><br/>
-        <label>Read-Only <input type="checkbox" ng-model="slider_all_options.options.readOnly"></label>
+        <label>Read-Only <input type="checkbox" ng-model="slider_all_options.options.readOnly"></label><br/>
+        <label>Right to left <input type="checkbox" ng-model="slider_all_options.options.rightToLeft"></label>
       </div>
     </div>
     <rzslider

snippets/color_slider_pointer.js

+$scope.slider = {
+    value: 12,
+    options: {
+        showSelectionBar: true,
+        getPointerColor: function(value) {
+            if (value <= 3)
+                return 'red';
+            if (value <= 6)
+                return 'orange';
+            if (value <= 9)
+                return 'yellow';
+            return '#2AE02A';
+        }
+    }
+};

snippets/slider_rtl.js

+$scope.slider = {
+    value: 20,
+    options: {
+        floor: 10,
+        ceil: 100,
+        step: 5,
+        rightToLeft: true
+    }
+};