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

Author: Valentin Hervieu

demo/demo.js

@@ -112,6 +112,16 @@ 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
+    }
+  };
+
   //Slider config with callbacks
   $scope.slider_callbacks = {
     value: 100,

demo/index.html

@@ -102,6 +102,14 @@ <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 callbacks on start, change and end</h2>
     <p>Value linked on start: {{ otherData.start }}</p>

dist/rzslider.js

@@ -1,7 +1,7 @@
 /*! angularjs-slider - v2.9.0 - 
  (c) Rafal Zajac <rzajac@gmail.com>, Valentin Hervieu <valentin@hervieu.me>, Jussi Saarivirta <jusasi@gmail.com>, Angelin Sirbu <angelin.sirbu@gmail.com> - 
  https://github.com/angular-slider/angularjs-slider - 
- 2016-02-24 */
+ 2016-02-25 */
 /*jslint unparam: true */
 /*global angular: false, console: false, define, module */
 (function(root, factory) {
@@ -52,6 +52,7 @@
       getSelectionBarColor: null,
       getPointerColor: null,
       keyboardSupport: true,
+      logScale: false,
       scale: 1,
       enforceStep: true,
       enforceRange: false,
@@ -643,6 +644,8 @@
         this.precision = +this.options.precision;
 
         this.minValue = this.options.floor;
+        if (this.options.logScale && this.minValue === 0)
+          throw new Error("Can't use floor=0 with logarithmic scale");
 
         if (this.options.enforceStep) {
           this.scope.rzSliderModel = this.roundStep(this.scope.rzSliderModel);
@@ -1027,7 +1030,7 @@
        * correct parameters
        */
       getPointerColor: function(pointerType) {
-        if ( pointerType === 'max' ) {
+        if (pointerType === 'max') {
           return this.options.getPointerColor(this.scope.rzSliderHigh, pointerType);
         }
         return this.options.getPointerColor(this.scope.rzSliderModel, pointerType);
@@ -1166,7 +1169,15 @@
        * @returns {number}
        */
       valueToOffset: function(val) {
-        return (this.sanitizeValue(val) - this.minValue) * this.maxPos / this.valueRange || 0;
+        var sanitizedValue = this.sanitizeValue(val);
+        if (!this.options.logScale)
+          return (sanitizedValue - this.minValue) * this.maxPos / this.valueRange || 0;
+        else {
+          var minLog = Math.log(this.minValue),
+            maxLog = Math.log(this.maxValue),
+            scale = (maxLog - minLog) / (this.maxPos);
+          return (Math.log(sanitizedValue) - minLog) / scale || 0;
+        }
       },
 
       /**
@@ -1186,7 +1197,14 @@
        * @returns {number}
        */
       offsetToValue: function(offset) {
-        return (offset / this.maxPos) * this.valueRange + this.minValue;
+        if (!this.options.logScale)
+          return (offset / this.maxPos) * this.valueRange + this.minValue;
+        else {
+          var minLog = Math.log(this.minValue),
+            maxLog = Math.log(this.maxValue),
+            scale = (maxLog - minLog) / (this.maxPos);
+          return Math.exp(minLog + scale * offset);
+        }
       },
 
       // Events

dist/rzslider.min.js

@@ -56,6 +56,7 @@
       getSelectionBarColor: null,
       getPointerColor: null,
       keyboardSupport: true,
+      logScale: false,
       scale: 1,
       enforceStep: true,
       enforceRange: false,
@@ -647,6 +648,8 @@
         this.precision = +this.options.precision;
 
         this.minValue = this.options.floor;
+        if (this.options.logScale && this.minValue === 0)
+          throw new Error("Can't use floor=0 with logarithmic scale");
 
         if (this.options.enforceStep) {
           this.scope.rzSliderModel = this.roundStep(this.scope.rzSliderModel);
@@ -1031,7 +1034,7 @@
        * correct parameters
        */
       getPointerColor: function(pointerType) {
-        if ( pointerType === 'max' ) {
+        if (pointerType === 'max') {
           return this.options.getPointerColor(this.scope.rzSliderHigh, pointerType);
         }
         return this.options.getPointerColor(this.scope.rzSliderModel, pointerType);
@@ -1170,7 +1173,15 @@
        * @returns {number}
        */
       valueToOffset: function(val) {
-        return (this.sanitizeValue(val) - this.minValue) * this.maxPos / this.valueRange || 0;
+        var sanitizedValue = this.sanitizeValue(val);
+        if (!this.options.logScale)
+          return (sanitizedValue - this.minValue) * this.maxPos / this.valueRange || 0;
+        else {
+          var minLog = Math.log(this.minValue),
+            maxLog = Math.log(this.maxValue),
+            scale = (maxLog - minLog) / (this.maxPos);
+          return (Math.log(sanitizedValue) - minLog) / scale || 0;
+        }
       },
 
       /**
@@ -1190,7 +1201,14 @@
        * @returns {number}
        */
       offsetToValue: function(offset) {
-        return (offset / this.maxPos) * this.valueRange + this.minValue;
+        if (!this.options.logScale)
+          return (offset / this.maxPos) * this.valueRange + this.minValue;
+        else {
+          var minLog = Math.log(this.minValue),
+            maxLog = Math.log(this.maxValue),
+            scale = (maxLog - minLog) / (this.maxPos);
+          return Math.exp(minLog + scale * offset);
+        }
       },
 
       // Events