Add smooth-steps behaviour flag (#627)

Author: leongersen

documentation/behaviour-option.php

@@ -26,6 +26,19 @@
 </section>
 
 
+<section>
+    <ul>
+        <li><a href="#section-tap">Tap</a></li>
+        <li><a href="#section-tap">Drag</a></li>
+        <li><a href="#section-fixed">Fixed dragging</a></li>
+        <li><a href="#section-drag-all">Drag all handles</a></li>
+        <li><a href="#section-snap">Snap</a></li>
+        <li><a href="#section-hover">Hover</a></li>
+        <li><a href="#section-unconstrained">Unconstrained</a></li>
+        <li><a href="#section-smooth-steps">Smooth steps</a></li>
+    </ul>
+</section>
+
 <?php sect('examples'); ?>
 <h2>Example configurations</h2>
 
@@ -212,13 +225,33 @@
 </section>
 
 
+<?php sect('smooth-steps'); ?>
+<h2>Smooth steps</h2>
+
+<section>
+
+	<div class="view">
+		<p>With this option set, handles will ignore <code>step</code> values while dragging. Steps are applied when a handle is released. The <code>"update"</code> event fires when a handle is released.</p>
+		<div class="example">
+			<div id="smooth-steps"></div>
+            <span class="example-val" id="smooth-steps-values"></span>
+			<?php run('smooth-steps'); ?>
+		</div>
+	</div>
+
+	<div class="side">
+		<?php code('smooth-steps'); ?>
+	</div>
+</section>
+
+
 <?php sect('combined'); ?>
 <h2>Combined options</h2>
 
 <section>
 
 	<div class="view">
-		<p>Most <code>'behaviour'</code> flags can be combined.</p>
+		<p>Most <code>'behaviour'</code> flags can be combined. This example combines <code>'tap'</code>, <code>'drag'</code> and <code>'smooth-steps'</code>.</p>
 		<div class="example">
 			<div id="combined"></div>
 			<?php run('combined'); ?>

documentation/behaviour-option/combined.js

@@ -2,7 +2,8 @@ var dragTapSlider = document.getElementById('combined');
 
 noUiSlider.create(dragTapSlider, {
     start: [40, 60],
-    behaviour: 'drag-tap',
+    behaviour: 'drag-smooth-steps-tap',
+    step: 10,
     connect: true,
     range: {
         'min': 20,

documentation/behaviour-option/smooth-steps.js

@@ -0,0 +1,17 @@
+var smoothStepsSlider = document.getElementById('smooth-steps');
+var smoothStepsValues = document.getElementById('smooth-steps-values');
+
+noUiSlider.create(smoothStepsSlider, {
+    start: [0, 100],
+    behaviour: 'smooth-steps',
+    step: 15,
+    connect: true,
+    range: {
+        'min': 0,
+        'max': 100
+    }
+});
+
+smoothStepsSlider.noUiSlider.on('update', function (values) {
+    smoothStepsValues.innerHTML = values.join(' :: ');
+});

src/nouislider.ts

@@ -152,6 +152,7 @@ interface Behaviour {
     tap: boolean;
     drag: boolean;
     dragAll: boolean;
+    smoothSteps: boolean;
     fixed: boolean;
     snap: boolean;
     hover: boolean;
@@ -1126,6 +1127,7 @@ function testBehaviour(parsed: ParsedOptions, entry: unknown): void {
     const hover = entry.indexOf("hover") >= 0;
     const unconstrained = entry.indexOf("unconstrained") >= 0;
     const dragAll = entry.indexOf("drag-all") >= 0;
+    const smoothSteps = entry.indexOf("smooth-steps") >= 0;
 
     if (fixed) {
         if (parsed.handles !== 2) {
@@ -1144,6 +1146,7 @@ function testBehaviour(parsed: ParsedOptions, entry: unknown): void {
         tap: tap || snap,
         drag: drag,
         dragAll: dragAll,
+        smoothSteps: smoothSteps,
         fixed: fixed,
         snap: snap,
         hover: hover,
@@ -2081,6 +2084,16 @@ function scope(target: TargetElement, options: ParsedOptions, originalOptions: O
             }
         }
 
+        if (options.events.smoothSteps) {
+            data.handleNumbers.forEach(function (handleNumber) {
+                setHandle(handleNumber, scope_Locations[handleNumber], true, true, false, false);
+            });
+
+            data.handleNumbers.forEach(function (handleNumber: number) {
+                fireEvent("update", handleNumber);
+            });
+        }
+
         data.handleNumbers.forEach(function (handleNumber: number) {
             fireEvent("change", handleNumber);
             fireEvent("set", handleNumber);
@@ -2448,7 +2461,8 @@ function scope(target: TargetElement, options: ParsedOptions, originalOptions: O
         to: number,
         lookBackward: boolean,
         lookForward: boolean,
-        getValue: boolean
+        getValue: boolean,
+        smoothSteps?: boolean
     ): number | false {
         let distance;
 
@@ -2495,7 +2509,9 @@ function scope(target: TargetElement, options: ParsedOptions, originalOptions: O
             }
         }
 
-        to = scope_Spectrum.getStep(to);
+        if (!smoothSteps) {
+            to = scope_Spectrum.getStep(to);
+        }
 
         // Limit percentage to the 0 - 100 range
         to = limit(to);
@@ -2528,6 +2544,8 @@ function scope(target: TargetElement, options: ParsedOptions, originalOptions: O
         // Store first handle now, so we still have it in case handleNumbers is reversed
         const firstHandle = handleNumbers[0];
 
+        const smoothSteps = options.events.smoothSteps;
+
         let b = [!upward, upward];
         let f = [upward, !upward];
 
@@ -2549,7 +2567,8 @@ function scope(target: TargetElement, options: ParsedOptions, originalOptions: O
                     proposals[handleNumber] + proposal,
                     b[o],
                     f[o],
-                    false
+                    false,
+                    smoothSteps
                 );
 
                 // Stop if one of the handles can't move.
@@ -2571,7 +2590,8 @@ function scope(target: TargetElement, options: ParsedOptions, originalOptions: O
 
         // Step 2: Try to set the handles with the found percentage
         handleNumbers.forEach(function (handleNumber, o) {
-            state = setHandle(handleNumber, locations[handleNumber] + proposal, b[o], f[o]) || state;
+            state =
+                setHandle(handleNumber, locations[handleNumber] + proposal, b[o], f[o], false, smoothSteps) || state;
         });
 
         // Step 3: If a handle moved, fire events
@@ -2631,10 +2651,19 @@ function scope(target: TargetElement, options: ParsedOptions, originalOptions: O
         to: number | false,
         lookBackward: boolean,
         lookForward: boolean,
-        exactInput?: boolean
+        exactInput?: boolean,
+        smoothSteps?: boolean
     ): boolean {
         if (!exactInput) {
-            to = checkHandlePosition(scope_Locations, handleNumber, <number>to, lookBackward, lookForward, false);
+            to = checkHandlePosition(
+                scope_Locations,
+                handleNumber,
+                <number>to,
+                lookBackward,
+                lookForward,
+                false,
+                smoothSteps
+            );
         }
 
         if (to === false) {