Update demo for logScale and custom scales

demo.js

@@ -358,6 +358,43 @@ app.controller('MainCtrl', function ($scope, $rootScope, $timeout, $modal) {
     }
   };
 
+
+  //Slider config with logarithmic scale
+  $scope.slider_log = {
+    value: 1,
+    options: {
+      floor: 1,
+      ceil: 100,
+      logScale: true,
+      showTicks: true
+    }
+  };
+
+  //Slider config with custom scale
+  $scope.slider_custom_scale = {
+    value: 50,
+    options: {
+      floor: 0,
+      ceil: 100,
+      step: 10,
+      showTicksValues: true,
+      customValueToPosition: function(val, minVal, maxVal) {
+        val = Math.sqrt(val);
+        minVal = Math.sqrt(minVal);
+        maxVal = Math.sqrt(maxVal);
+        var range = maxVal - minVal;
+        return (val - minVal) / range;
+      },
+      customPositionToValue: function(percent, minVal, maxVal) {
+        minVal = Math.sqrt(minVal);
+        maxVal = Math.sqrt(maxVal);
+        var value = percent * (maxVal - minVal) + minVal;
+        return Math.pow(value, 2);
+      }
+    }
+  };
+
+
   //Slider with custom template in order to use HTML formatting for ticks
   $scope.slider_custom_template = {
     value: 100,

index.html

@@ -321,6 +321,24 @@
     </tabset>
   </article>
 
+  <article>
+    <h2>Slider with logarithmic scale</h2>
+    <rzslider
+      rz-slider-model="slider_log.value"
+      rz-slider-options="slider_log.options"
+    ></rzslider>
+    <show-code js-file="slider_log" html-file="singleSlider"></show-code>
+  </article>
+
+  <article>
+    <h2>Slider with custom scale</h2>
+    <rzslider
+      rz-slider-model="slider_custom_scale.value"
+      rz-slider-options="slider_custom_scale.options"
+    ></rzslider>
+    <show-code js-file="slider_custom_scale" html-file="singleSlider"></show-code>
+  </article>
+
   <article>
     <h2>Slider with angular directive inside custom template</h2>
     <rzslider

snippets/slider_custom_scale.js

+$scope.slider = {
+  value: 50,
+  options: {
+    floor: 0,
+    ceil: 100,
+    step: 10,
+    showTicksValues: true,
+    customValueToPosition: function(val, minVal, maxVal) {
+      val = Math.sqrt(val);
+      minVal = Math.sqrt(minVal);
+      maxVal = Math.sqrt(maxVal);
+      var range = maxVal - minVal;
+      return (val - minVal) / range;
+    },
+    customPositionToValue: function(percent, minVal, maxVal) {
+      minVal = Math.sqrt(minVal);
+      maxVal = Math.sqrt(maxVal);
+      var value = percent * (maxVal - minVal) + minVal;
+      return Math.pow(value, 2);
+    }
+  }
+};

snippets/slider_log.js

+$scope.slider = {
+  value: 1,
+  options: {
+    floor: 1,
+    ceil: 100,
+    logScale: true,
+    showTicks: true
+  }
+};