feat(logScale): Implement a logScale option (#280)

*  feat(logScale): Implement a logScale option to display sliders with logarithmic scale

Author: ValentinH

CHANGELOG.md

@@ -1,6 +1,11 @@
+# 5.7.0 (2016-10-16)
+## Features
+- Add a `logScale` option to display the slider using a logarithmic scale (#280).
+- Add `customValueToPosition` and `customPositionToValue` options to display the slider using a custom scale (#280).
+
 # 5.6.0 (2016-10-16)
 ## Features
-- Add an `ticksArray` to display ticks at specific positions (#426).
+- Add a `ticksArray` option to display ticks at specific positions (#426).
 
 To enable this new feature, the way the ticks are rendered has been changed. Now each tick is positioned absolutely using a `transform: translate()` instruction.
 

README.md

@@ -239,7 +239,10 @@ The default options are:
     rightToLeft: false,
     boundPointerLabels: true,
     mergeRangeLabelsIfSame: false,
-    customTemplateScope: null
+    customTemplateScope: null,
+    logScale: false,
+    customValueToPosition: null,
+    customPositionToValue: null
 }
 ````
 
@@ -382,6 +385,14 @@ _Changing this value at runtime is not currently supported._
 
 **customTemplateScope** - _Object (default to null)_: The properties defined in this object will be exposed in the slider template under `custom.X`.
 
+**logScale** - _Boolean (defaults to false)_: Set to true to use a logarithmic scale to display the slider.
+
+For custom scales:
+**customValueToPosition** - _Function(val, minVal, maxVal): percent_: Function that returns the position on the slider for a given value. The position must be a percentage between 0 and 1.
+
+**customPositionToValue** - _Function(percent, minVal, maxVal): value_: Function that returns the value for a given position on the slider. The position is a percentage between 0 and 1.
+
+
 ## Change default options
 If you want the change the default options for all the sliders displayed in your application, you can set them using the `RzSliderOptions.options()` method:
 ```js

demo/demo.js

@@ -13,6 +13,7 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
     options: {
       floor: 0,
       ceil: 100,
+      rightToLeft: true,
       step: 1
     }
   };
@@ -137,6 +138,41 @@ 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);
+      }
+    }
+  };
+
   //Right to left slider with floor, ceil and step
   $scope.slider_floor_ceil_rtl = {
     value: 12,
@@ -232,8 +268,7 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
     options: {
       ceil: 10,
       floor: 0,
-      ticksArray: [0, 1, 3, 8, 10],
-      showTicksValues: true
+      ticksArray: [0, 1, 3, 8, 10]
     }
   };
 
@@ -322,7 +357,7 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
       step: 50,
       showSelectionBar: true,
       showTicks: true,
-      getTickColor: function(value){
+      getTickColor: function(value) {
         if (value < 300)
           return 'red';
         if (value < 600)
@@ -564,8 +599,8 @@ app.directive('clickableLabel', function() {
     scope: {label: '='},
     replace: true,
     template: "<button ng-click='onclick(label)' style='cursor: pointer;'>click me - {{label}}</button>",
-    link: function(scope, elem, attrs){
-      scope.onclick = function(label){
+    link: function(scope, elem, attrs) {
+      scope.onclick = function(label) {
         alert("I'm " + label);
       };
     }

demo/index.html

@@ -119,6 +119,22 @@ <h2>Slider with custom floor/ceil/step</h2>
     ></rzslider>
   </article>
 
+  <article>
+    <h2>Slider with logarithmic scale</h2>
+    <rzslider
+      rz-slider-model="slider_log.value"
+      rz-slider-options="slider_log.options"
+    ></rzslider>
+  </article>
+
+  <article>
+    <h2>Slider with custom scale</h2>
+    <rzslider
+      rz-slider-model="slider_custom_scale.value"
+      rz-slider-options="slider_custom_scale.options"
+    ></rzslider>
+  </article>
+
   <article>
     <h2>Right to left slider with custom floor/ceil/step</h2>
     <rzslider