bugfixes: previousValue, double events, handle overrun

- fix a bug where `previousValue` was incorrectly set as `startValue` during change event when `previousValue` was `0` - fix a bug where if the handle was moved past the min/max then `values` would momentarily be set wrong, causing errors when bound with other sliders or `{each}` statements - reduce the amount of events/calls when changing values by setting `alignValueToStep()` as values are set, instead of read - add `startValue` in the `change` event - improve some comments, i must have been in a dream when i wrote those - edit some whitespace
simeydotme · Jan 19, 2021 · 9e9e657 · 9e9e657
1 parent ebfc946
commit 9e9e657
Show file tree

Hide file tree

Showing 7 changed files with 131 additions and 78 deletions.
diff --git a/README.md b/README.md
@@ -111,7 +111,7 @@ prop | type | default | description
 event | example | `event.detail` | description
 ------|------------|--------|-------------
 **start** | `on:start={(e) => { ... }}` | `{ activeHandle: Integer, value: Float, values: Array }` | Event fired when the user begins interaction with the slider
-**change** | `on:change={(e) => { ... }}` | `{ activeHandle: Integer, previousValue: Float, value: Float, values: Array }` | Event fired when the user changes the value; returns the previous value, also
+**change** | `on:change={(e) => { ... }}` | `{ activeHandle: Integer, startValue: Float, previousValue: Float, value: Float, values: Array }` | Event fired when the user changes the value; returns the previous value, also
 **stop** | `on:stop={(e) => { ... }}` | `{ activeHandle: Integer, startValue: Float, value: Float, values: Array }` | Event fired when the user stops interacting with slider; returns the beginning value, also
 
 **[📔📘📖 _Full Documentation & Examples_](https://simeydotme.github.io/svelte-range-slider-pips/)**

diff --git a/dist/svelte-range-slider-pips.js b/dist/svelte-range-slider-pips.js
@@ -1,7 +1,7 @@
 /**
- * svelte-range-slider-pips ~ 1.6.0
+ * svelte-range-slider-pips ~ 1.6.1
  * Multi-Thumb, Accessible, Beautiful Range Slider with Pips
- * © MPL-2.0 ~ Simon Goellner <[email protected]> ~ 16/1/2021
+ * © MPL-2.0 ~ Simon Goellner <[email protected]> ~ 20/1/2021
  */
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
@@ -1133,7 +1133,7 @@
     	return child_ctx;
     }
 
-    // (724:6) {#if float}
+    // (734:6) {#if float}
     function create_if_block_2$1(ctx) {
     	let span;
     	let t0;
@@ -1166,7 +1166,7 @@
     	};
     }
 
-    // (706:2) {#each values as value, index}
+    // (716:2) {#each values as value, index}
     function create_each_block$1(ctx) {
     	let span1;
     	let span0;
@@ -1287,7 +1287,7 @@
     	};
     }
 
-    // (729:2) {#if range}
+    // (739:2) {#if range}
     function create_if_block_1$1(ctx) {
     	let span;
     	let span_style_value;
@@ -1312,7 +1312,7 @@
     	};
     }
 
-    // (735:2) {#if pips}
+    // (745:2) {#if pips}
     function create_if_block$1(ctx) {
     	let rangepips;
     	let current;
@@ -1614,6 +1614,8 @@
     	let { handleFormatter = formatter } = $$props;
     	let { precision = 2 } = $$props;
     	let { springValues = { stiffness: 0.15, damping: 0.4 } } = $$props;
+
+    	// prepare dispatched events
     	const dispatch = createEventDispatcher();
 
     	// dom references
@@ -1629,8 +1631,8 @@
     	let startValue;
     	let previousValue;
 
-    	// save spring-tweened copies of the values for use
-    	// when changing values and animating the handle/range nicely
+    	// copy the initial values in to a spring function which
+    	// will update every time the values array is modified
     	let springPositions = spring(values.map(v => parseFloat(((v - min) / (max - min) * 100).toFixed(precision))), springValues);
 
     	component_subscribe($$self, springPositions, value => $$invalidate(24, $springPositions = value));
@@ -1648,8 +1650,8 @@
     	}
 
     	/**
-     * take in the value from the "range" parameter and see if
-     * we should make a min/max/range slider.
+     * trim the values array based on whether the property
+     * for 'range' is 'min', 'max', or truthy.
      * @param {array} values the input values for the rangeSlider
      * @return {array} the range array for creating a rangeSlider
      **/
@@ -1757,6 +1759,11 @@
      * @return {number} the value that was moved to (after alignment/clamping)
      **/
     	function moveHandle(index, value) {
+    		// align & clamp the value so we're not doing extra
+    		// calculation on an out-of-range value down below
+    		value = alignValueToStep(value);
+
+    		// if this is a range slider
     		if (range) {
     			// restrict the handles of a range-slider from
     			// going past one-another unless "pushy" is true
@@ -1775,14 +1782,16 @@
     			}
     		}
 
-    		// set the value for the handle, and align/clamp it
-    		$$invalidate(0, values[index] = value, values);
+    		// if the value has changed, update it
+    		if (values[index] !== value) {
+    			$$invalidate(0, values[index] = value, values);
+    		}
 
     		// fire the change event when the handle moves,
     		// and store the previous value for the next time
-    		if (previousValue !== alignValueToStep(value)) {
+    		if (previousValue !== value) {
     			eChange();
-    			previousValue = alignValueToStep(value);
+    			previousValue = value;
     		}
     	}
 
@@ -1894,7 +1903,7 @@
     		$$invalidate(22, activeHandle = getClosestHandle(clientPos));
 
     		// fire the start event
-    		startValue = values[activeHandle];
+    		startValue = previousValue = alignValueToStep(values[activeHandle]);
 
     		eStart();
 
@@ -1992,25 +2001,28 @@
     	function eStart() {
     		dispatch("start", {
     			activeHandle,
-    			value: alignValueToStep(startValue),
+    			value: startValue,
     			values: values.map(v => alignValueToStep(v))
     		});
     	}
 
     	function eStop() {
     		dispatch("stop", {
     			activeHandle,
-    			startValue: alignValueToStep(startValue),
-    			value: alignValueToStep(values[activeHandle]),
+    			startValue,
+    			value: values[activeHandle],
     			values: values.map(v => alignValueToStep(v))
     		});
     	}
 
     	function eChange() {
     		dispatch("change", {
     			activeHandle,
-    			previousValue: alignValueToStep(previousValue) || alignValueToStep(startValue) || alignValueToStep(values[activeHandle]),
-    			value: alignValueToStep(values[activeHandle]),
+    			startValue,
+    			previousValue: typeof previousValue === "undefined"
+    			? startValue
+    			: previousValue,
+    			value: values[activeHandle],
     			values: values.map(v => alignValueToStep(v))
     		});
     	}
@@ -2102,8 +2114,8 @@
     		}
 
     		if ($$self.$$.dirty[0] & /*values*/ 1 | $$self.$$.dirty[1] & /*alignValueToStep*/ 32768) {
-    			// watch the values array, and trim / clamp the values to the steps
-    			// and boundaries set up in the slider on change
+    			// check the values array, and trim it if needed (range)
+    			// and clamp the values to the steps and boundaries set up in the slider
     			 $$invalidate(0, values = trimRange(values).map(v => alignValueToStep(v)));
     		}
 

diff --git a/dist/svelte-range-slider-pips.mjs b/dist/svelte-range-slider-pips.mjs
@@ -1,7 +1,7 @@
 /**
- * svelte-range-slider-pips ~ 1.6.0
+ * svelte-range-slider-pips ~ 1.6.1
  * Multi-Thumb, Accessible, Beautiful Range Slider with Pips
- * © MPL-2.0 ~ Simon Goellner <[email protected]> ~ 16/1/2021
+ * © MPL-2.0 ~ Simon Goellner <[email protected]> ~ 20/1/2021
  */
 function noop() { }
 function run(fn) {
@@ -1127,7 +1127,7 @@ function get_each_context$1(ctx, list, i) {
 	return child_ctx;
 }
 
-// (724:6) {#if float}
+// (734:6) {#if float}
 function create_if_block_2$1(ctx) {
 	let span;
 	let t0;
@@ -1160,7 +1160,7 @@ function create_if_block_2$1(ctx) {
 	};
 }
 
-// (706:2) {#each values as value, index}
+// (716:2) {#each values as value, index}
 function create_each_block$1(ctx) {
 	let span1;
 	let span0;
@@ -1281,7 +1281,7 @@ function create_each_block$1(ctx) {
 	};
 }
 
-// (729:2) {#if range}
+// (739:2) {#if range}
 function create_if_block_1$1(ctx) {
 	let span;
 	let span_style_value;
@@ -1306,7 +1306,7 @@ function create_if_block_1$1(ctx) {
 	};
 }
 
-// (735:2) {#if pips}
+// (745:2) {#if pips}
 function create_if_block$1(ctx) {
 	let rangepips;
 	let current;
@@ -1608,6 +1608,8 @@ function instance$1($$self, $$props, $$invalidate) {
 	let { handleFormatter = formatter } = $$props;
 	let { precision = 2 } = $$props;
 	let { springValues = { stiffness: 0.15, damping: 0.4 } } = $$props;
+
+	// prepare dispatched events
 	const dispatch = createEventDispatcher();
 
 	// dom references
@@ -1623,8 +1625,8 @@ function instance$1($$self, $$props, $$invalidate) {
 	let startValue;
 	let previousValue;
 
-	// save spring-tweened copies of the values for use
-	// when changing values and animating the handle/range nicely
+	// copy the initial values in to a spring function which
+	// will update every time the values array is modified
 	let springPositions = spring(values.map(v => parseFloat(((v - min) / (max - min) * 100).toFixed(precision))), springValues);
 
 	component_subscribe($$self, springPositions, value => $$invalidate(24, $springPositions = value));
@@ -1642,8 +1644,8 @@ function instance$1($$self, $$props, $$invalidate) {
 	}
 
 	/**
- * take in the value from the "range" parameter and see if
- * we should make a min/max/range slider.
+ * trim the values array based on whether the property
+ * for 'range' is 'min', 'max', or truthy.
  * @param {array} values the input values for the rangeSlider
  * @return {array} the range array for creating a rangeSlider
  **/
@@ -1751,6 +1753,11 @@ function instance$1($$self, $$props, $$invalidate) {
  * @return {number} the value that was moved to (after alignment/clamping)
  **/
 	function moveHandle(index, value) {
+		// align & clamp the value so we're not doing extra
+		// calculation on an out-of-range value down below
+		value = alignValueToStep(value);
+
+		// if this is a range slider
 		if (range) {
 			// restrict the handles of a range-slider from
 			// going past one-another unless "pushy" is true
@@ -1769,14 +1776,16 @@ function instance$1($$self, $$props, $$invalidate) {
 			}
 		}
 
-		// set the value for the handle, and align/clamp it
-		$$invalidate(0, values[index] = value, values);
+		// if the value has changed, update it
+		if (values[index] !== value) {
+			$$invalidate(0, values[index] = value, values);
+		}
 
 		// fire the change event when the handle moves,
 		// and store the previous value for the next time
-		if (previousValue !== alignValueToStep(value)) {
+		if (previousValue !== value) {
 			eChange();
-			previousValue = alignValueToStep(value);
+			previousValue = value;
 		}
 	}
 
@@ -1888,7 +1897,7 @@ function instance$1($$self, $$props, $$invalidate) {
 		$$invalidate(22, activeHandle = getClosestHandle(clientPos));
 
 		// fire the start event
-		startValue = values[activeHandle];
+		startValue = previousValue = alignValueToStep(values[activeHandle]);
 
 		eStart();
 
@@ -1986,25 +1995,28 @@ function instance$1($$self, $$props, $$invalidate) {
 	function eStart() {
 		dispatch("start", {
 			activeHandle,
-			value: alignValueToStep(startValue),
+			value: startValue,
 			values: values.map(v => alignValueToStep(v))
 		});
 	}
 
 	function eStop() {
 		dispatch("stop", {
 			activeHandle,
-			startValue: alignValueToStep(startValue),
-			value: alignValueToStep(values[activeHandle]),
+			startValue,
+			value: values[activeHandle],
 			values: values.map(v => alignValueToStep(v))
 		});
 	}
 
 	function eChange() {
 		dispatch("change", {
 			activeHandle,
-			previousValue: alignValueToStep(previousValue) || alignValueToStep(startValue) || alignValueToStep(values[activeHandle]),
-			value: alignValueToStep(values[activeHandle]),
+			startValue,
+			previousValue: typeof previousValue === "undefined"
+			? startValue
+			: previousValue,
+			value: values[activeHandle],
 			values: values.map(v => alignValueToStep(v))
 		});
 	}
@@ -2096,8 +2108,8 @@ function instance$1($$self, $$props, $$invalidate) {
 		}
 
 		if ($$self.$$.dirty[0] & /*values*/ 1 | $$self.$$.dirty[1] & /*alignValueToStep*/ 32768) {
-			// watch the values array, and trim / clamp the values to the steps
-			// and boundaries set up in the slider on change
+			// check the values array, and trim it if needed (range)
+			// and clamp the values to the steps and boundaries set up in the slider
 			 $$invalidate(0, values = trimRange(values).map(v => alignValueToStep(v)));
 		}
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "svelte-range-slider-pips",
-  "version": "1.6.0",
+  "version": "1.6.1",
   "svelte": "src/index.js",
   "module": "dist/svelte-range-slider-pips.mjs",
   "main": "dist/svelte-range-slider-pips.js",