Handle exact value on tick click

Author: ValentinH

demo/demo.js

@@ -237,6 +237,16 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
     }
   };
 
+  //Slider with ticks at intermediate positions
+  $scope.slider_ticks_at = {
+    value: 500,
+    options: {
+      ceil: 1000,
+      floor: 0,
+      showTicks: 100
+    }
+  };
+
   //Slider with draggable range
   $scope.slider_draggable_range = {
     minValue: 1,

demo/index.html

@@ -181,6 +181,14 @@ <h2>Range slider with ticks and values</h2>
     ></rzslider>
   </article>
 
+  <article>
+    <h2>Slider with ticks at intermediate positions</h2>
+    <rzslider
+      rz-slider-model="slider_ticks_at.value"
+      rz-slider-options="slider_ticks_at.options"
+    ></rzslider>
+  </article>
+
   <article>
     <h2>Slider with draggable range</h2>
     <rzslider

dist/rzslider.js

@@ -1078,6 +1078,7 @@
       /**
        * Return the translated value if a translate function is provided else the original value
        * @param value
+       * @param which if it's min or max handle
        * @returns {*}
        */
       getDisplayValue: function(value, which) {
@@ -1088,11 +1089,13 @@
        * Round value to step and precision based on minValue
        *
        * @param {number} value
+       * @param {number} customStep a custom step to override the defined step
        * @returns {number}
        */
-      roundStep: function(value) {
-        var steppedDifference = parseFloat((value - this.minValue) / this.step).toPrecision(12);
-        steppedDifference = Math.round(steppedDifference) * this.step;
+      roundStep: function(value, customStep) {
+        var step = customStep ? customStep : this.step,
+          steppedDifference = parseFloat((value - this.minValue) / step).toPrecision(12);
+        steppedDifference = Math.round(+steppedDifference) * step;
         var newValue = (this.minValue + steppedDifference).toFixed(this.precision);
         return +newValue;
       },
@@ -1335,7 +1338,7 @@
             this.fullBar.on('mousedown', angular.bind(this, this.onStart, null, null));
             this.fullBar.on('mousedown', angular.bind(this, this.onMove, this.fullBar));
             this.ticks.on('mousedown', angular.bind(this, this.onStart, null, null));
-            this.ticks.on('mousedown', angular.bind(this, this.onMove, this.ticks));
+            this.ticks.on('mousedown', angular.bind(this, this.onTickClick, this.ticks));
           }
         }
 
@@ -1355,7 +1358,7 @@
             this.fullBar.on('touchstart', angular.bind(this, this.onStart, null, null));
             this.fullBar.on('touchstart', angular.bind(this, this.onMove, this.fullBar));
             this.ticks.on('touchstart', angular.bind(this, this.onStart, null, null));
-            this.ticks.on('touchstart', angular.bind(this, this.onMove, this.ticks));
+            this.ticks.on('touchstart', angular.bind(this, this.onTickClick, this.ticks));
           }
         }
 
@@ -1424,9 +1427,10 @@
        *
        * @param {jqLite} pointer
        * @param {Event}  event The event
+       * @param {boolean}  fromTick if the event occured on a tick or not
        * @returns {undefined}
        */
-      onMove: function(pointer, event) {
+      onMove: function(pointer, event, fromTick) {
         var newOffset = this.getEventPosition(event),
           newValue,
           ceilValue = this.options.rightToLeft ? this.minValue : this.maxValue,
@@ -1438,7 +1442,10 @@
           newValue = ceilValue;
         } else {
           newValue = this.offsetToValue(newOffset);
-          newValue = this.roundStep(newValue);
+          if(fromTick && angular.isNumber(this.options.showTicks))
+            newValue = this.roundStep(newValue, this.options.showTicks);
+          else
+            newValue = this.roundStep(newValue);
         }
         this.positionTrackingHandle(newValue);
       },
@@ -1465,6 +1472,10 @@
         this.callOnEnd();
       },
 
+      onTickClick: function(pointer, event) {
+        this.onMove(pointer, event, true);
+      },
+
       onPointerFocus: function(pointer, ref) {
         this.tracking = ref;
         pointer.one('blur', angular.bind(this, this.onPointerBlur, pointer));

dist/rzslider.min.js

@@ -1082,6 +1082,7 @@
       /**
        * Return the translated value if a translate function is provided else the original value
        * @param value
+       * @param which if it's min or max handle
        * @returns {*}
        */
       getDisplayValue: function(value, which) {
@@ -1092,11 +1093,13 @@
        * Round value to step and precision based on minValue
        *
        * @param {number} value
+       * @param {number} customStep a custom step to override the defined step
        * @returns {number}
        */
-      roundStep: function(value) {
-        var steppedDifference = parseFloat((value - this.minValue) / this.step).toPrecision(12);
-        steppedDifference = Math.round(steppedDifference) * this.step;
+      roundStep: function(value, customStep) {
+        var step = customStep ? customStep : this.step,
+          steppedDifference = parseFloat((value - this.minValue) / step).toPrecision(12);
+        steppedDifference = Math.round(+steppedDifference) * step;
         var newValue = (this.minValue + steppedDifference).toFixed(this.precision);
         return +newValue;
       },
@@ -1339,7 +1342,7 @@
             this.fullBar.on('mousedown', angular.bind(this, this.onStart, null, null));
             this.fullBar.on('mousedown', angular.bind(this, this.onMove, this.fullBar));
             this.ticks.on('mousedown', angular.bind(this, this.onStart, null, null));
-            this.ticks.on('mousedown', angular.bind(this, this.onMove, this.ticks));
+            this.ticks.on('mousedown', angular.bind(this, this.onTickClick, this.ticks));
           }
         }
 
@@ -1359,7 +1362,7 @@
             this.fullBar.on('touchstart', angular.bind(this, this.onStart, null, null));
             this.fullBar.on('touchstart', angular.bind(this, this.onMove, this.fullBar));
             this.ticks.on('touchstart', angular.bind(this, this.onStart, null, null));
-            this.ticks.on('touchstart', angular.bind(this, this.onMove, this.ticks));
+            this.ticks.on('touchstart', angular.bind(this, this.onTickClick, this.ticks));
           }
         }
 
@@ -1428,9 +1431,10 @@
        *
        * @param {jqLite} pointer
        * @param {Event}  event The event
+       * @param {boolean}  fromTick if the event occured on a tick or not
        * @returns {undefined}
        */
-      onMove: function(pointer, event) {
+      onMove: function(pointer, event, fromTick) {
         var newOffset = this.getEventPosition(event),
           newValue,
           ceilValue = this.options.rightToLeft ? this.minValue : this.maxValue,
@@ -1442,7 +1446,10 @@
           newValue = ceilValue;
         } else {
           newValue = this.offsetToValue(newOffset);
-          newValue = this.roundStep(newValue);
+          if(fromTick && angular.isNumber(this.options.showTicks))
+            newValue = this.roundStep(newValue, this.options.showTicks);
+          else
+            newValue = this.roundStep(newValue);
         }
         this.positionTrackingHandle(newValue);
       },
@@ -1469,6 +1476,10 @@
         this.callOnEnd();
       },
 
+      onTickClick: function(pointer, event) {
+        this.onMove(pointer, event, true);
+      },
+
       onPointerFocus: function(pointer, ref) {
         this.tracking = ref;
         pointer.one('blur', angular.bind(this, this.onPointerBlur, pointer));