Skip to content

Commit 9e9e657

Browse files
simeydotmesimeydotme
committed
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
1 parent ebfc946 commit 9e9e657

File tree

7 files changed

+131
-78
lines changed

7 files changed

+131
-78
lines changed

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -111,7 +111,7 @@ prop | type | default | description
111111
event | example | `event.detail` | description
112112
------|------------|--------|-------------
113113
**start** | `on:start={(e) => { ... }}` | `{ activeHandle: Integer, value: Float, values: Array }` | Event fired when the user begins interaction with the slider
114-
**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
114+
**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
115115
**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
116116

117117
**[📔📘📖 _Full Documentation & Examples_](https://simeydotme.github.io/svelte-range-slider-pips/)**

‎dist/svelte-range-slider-pips.js‎

Lines changed: 34 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/**
2-
* svelte-range-slider-pips ~ 1.6.0
2+
* svelte-range-slider-pips ~ 1.6.1
33
* Multi-Thumb, Accessible, Beautiful Range Slider with Pips
4-
* © MPL-2.0 ~ Simon Goellner <[email protected]> ~ 16/1/2021
4+
* © MPL-2.0 ~ Simon Goellner <[email protected]> ~ 20/1/2021
55
*/
66
(function (global, factory) {
77
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
@@ -1133,7 +1133,7 @@
11331133
return child_ctx;
11341134
}
11351135

1136-
// (724:6) {#if float}
1136+
// (734:6) {#if float}
11371137
function create_if_block_2$1(ctx) {
11381138
let span;
11391139
let t0;
@@ -1166,7 +1166,7 @@
11661166
};
11671167
}
11681168

1169-
// (706:2) {#each values as value, index}
1169+
// (716:2) {#each values as value, index}
11701170
function create_each_block$1(ctx) {
11711171
let span1;
11721172
let span0;
@@ -1287,7 +1287,7 @@
12871287
};
12881288
}
12891289

1290-
// (729:2) {#if range}
1290+
// (739:2) {#if range}
12911291
function create_if_block_1$1(ctx) {
12921292
let span;
12931293
let span_style_value;
@@ -1312,7 +1312,7 @@
13121312
};
13131313
}
13141314

1315-
// (735:2) {#if pips}
1315+
// (745:2) {#if pips}
13161316
function create_if_block$1(ctx) {
13171317
let rangepips;
13181318
let current;
@@ -1614,6 +1614,8 @@
16141614
let { handleFormatter = formatter } = $$props;
16151615
let { precision = 2 } = $$props;
16161616
let { springValues = { stiffness: 0.15, damping: 0.4 } } = $$props;
1617+
1618+
// prepare dispatched events
16171619
const dispatch = createEventDispatcher();
16181620

16191621
// dom references
@@ -1629,8 +1631,8 @@
16291631
let startValue;
16301632
let previousValue;
16311633

1632-
// save spring-tweened copies of the values for use
1633-
// when changing values and animating the handle/range nicely
1634+
// copy the initial values in to a spring function which
1635+
// will update every time the values array is modified
16341636
let springPositions = spring(values.map(v => parseFloat(((v - min) / (max - min) * 100).toFixed(precision))), springValues);
16351637

16361638
component_subscribe($$self, springPositions, value => $$invalidate(24, $springPositions = value));
@@ -1648,8 +1650,8 @@
16481650
}
16491651

16501652
/**
1651-
* take in the value from the "range" parameter and see if
1652-
* we should make a min/max/range slider.
1653+
* trim the values array based on whether the property
1654+
* for 'range' is 'min', 'max', or truthy.
16531655
* @param {array} values the input values for the rangeSlider
16541656
* @return {array} the range array for creating a rangeSlider
16551657
**/
@@ -1757,6 +1759,11 @@
17571759
* @return {number} the value that was moved to (after alignment/clamping)
17581760
**/
17591761
function moveHandle(index, value) {
1762+
// align & clamp the value so we're not doing extra
1763+
// calculation on an out-of-range value down below
1764+
value = alignValueToStep(value);
1765+
1766+
// if this is a range slider
17601767
if (range) {
17611768
// restrict the handles of a range-slider from
17621769
// going past one-another unless "pushy" is true
@@ -1775,14 +1782,16 @@
17751782
}
17761783
}
17771784

1778-
// set the value for the handle, and align/clamp it
1779-
$$invalidate(0, values[index] = value, values);
1785+
// if the value has changed, update it
1786+
if (values[index] !== value) {
1787+
$$invalidate(0, values[index] = value, values);
1788+
}
17801789

17811790
// fire the change event when the handle moves,
17821791
// and store the previous value for the next time
1783-
if (previousValue !== alignValueToStep(value)) {
1792+
if (previousValue !== value) {
17841793
eChange();
1785-
previousValue = alignValueToStep(value);
1794+
previousValue = value;
17861795
}
17871796
}
17881797

@@ -1894,7 +1903,7 @@
18941903
$$invalidate(22, activeHandle = getClosestHandle(clientPos));
18951904

18961905
// fire the start event
1897-
startValue = values[activeHandle];
1906+
startValue = previousValue = alignValueToStep(values[activeHandle]);
18981907

18991908
eStart();
19001909

@@ -1992,25 +2001,28 @@
19922001
function eStart() {
19932002
dispatch("start", {
19942003
activeHandle,
1995-
value: alignValueToStep(startValue),
2004+
value: startValue,
19962005
values: values.map(v => alignValueToStep(v))
19972006
});
19982007
}
19992008

20002009
function eStop() {
20012010
dispatch("stop", {
20022011
activeHandle,
2003-
startValue: alignValueToStep(startValue),
2004-
value: alignValueToStep(values[activeHandle]),
2012+
startValue,
2013+
value: values[activeHandle],
20052014
values: values.map(v => alignValueToStep(v))
20062015
});
20072016
}
20082017

20092018
function eChange() {
20102019
dispatch("change", {
20112020
activeHandle,
2012-
previousValue: alignValueToStep(previousValue) || alignValueToStep(startValue) || alignValueToStep(values[activeHandle]),
2013-
value: alignValueToStep(values[activeHandle]),
2021+
startValue,
2022+
previousValue: typeof previousValue === "undefined"
2023+
? startValue
2024+
: previousValue,
2025+
value: values[activeHandle],
20142026
values: values.map(v => alignValueToStep(v))
20152027
});
20162028
}
@@ -2102,8 +2114,8 @@
21022114
}
21032115

21042116
if ($$self.$$.dirty[0] & /*values*/ 1 | $$self.$$.dirty[1] & /*alignValueToStep*/ 32768) {
2105-
// watch the values array, and trim / clamp the values to the steps
2106-
// and boundaries set up in the slider on change
2117+
// check the values array, and trim it if needed (range)
2118+
// and clamp the values to the steps and boundaries set up in the slider
21072119
$$invalidate(0, values = trimRange(values).map(v => alignValueToStep(v)));
21082120
}
21092121

‎dist/svelte-range-slider-pips.mjs‎

Lines changed: 34 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/**
2-
* svelte-range-slider-pips ~ 1.6.0
2+
* svelte-range-slider-pips ~ 1.6.1
33
* Multi-Thumb, Accessible, Beautiful Range Slider with Pips
4-
* © MPL-2.0 ~ Simon Goellner <[email protected]> ~ 16/1/2021
4+
* © MPL-2.0 ~ Simon Goellner <[email protected]> ~ 20/1/2021
55
*/
66
function noop() { }
77
function run(fn) {
@@ -1127,7 +1127,7 @@ function get_each_context$1(ctx, list, i) {
11271127
return child_ctx;
11281128
}
11291129

1130-
// (724:6) {#if float}
1130+
// (734:6) {#if float}
11311131
function create_if_block_2$1(ctx) {
11321132
let span;
11331133
let t0;
@@ -1160,7 +1160,7 @@ function create_if_block_2$1(ctx) {
11601160
};
11611161
}
11621162

1163-
// (706:2) {#each values as value, index}
1163+
// (716:2) {#each values as value, index}
11641164
function create_each_block$1(ctx) {
11651165
let span1;
11661166
let span0;
@@ -1281,7 +1281,7 @@ function create_each_block$1(ctx) {
12811281
};
12821282
}
12831283

1284-
// (729:2) {#if range}
1284+
// (739:2) {#if range}
12851285
function create_if_block_1$1(ctx) {
12861286
let span;
12871287
let span_style_value;
@@ -1306,7 +1306,7 @@ function create_if_block_1$1(ctx) {
13061306
};
13071307
}
13081308

1309-
// (735:2) {#if pips}
1309+
// (745:2) {#if pips}
13101310
function create_if_block$1(ctx) {
13111311
let rangepips;
13121312
let current;
@@ -1608,6 +1608,8 @@ function instance$1($$self, $$props, $$invalidate) {
16081608
let { handleFormatter = formatter } = $$props;
16091609
let { precision = 2 } = $$props;
16101610
let { springValues = { stiffness: 0.15, damping: 0.4 } } = $$props;
1611+
1612+
// prepare dispatched events
16111613
const dispatch = createEventDispatcher();
16121614

16131615
// dom references
@@ -1623,8 +1625,8 @@ function instance$1($$self, $$props, $$invalidate) {
16231625
let startValue;
16241626
let previousValue;
16251627

1626-
// save spring-tweened copies of the values for use
1627-
// when changing values and animating the handle/range nicely
1628+
// copy the initial values in to a spring function which
1629+
// will update every time the values array is modified
16281630
let springPositions = spring(values.map(v => parseFloat(((v - min) / (max - min) * 100).toFixed(precision))), springValues);
16291631

16301632
component_subscribe($$self, springPositions, value => $$invalidate(24, $springPositions = value));
@@ -1642,8 +1644,8 @@ function instance$1($$self, $$props, $$invalidate) {
16421644
}
16431645

16441646
/**
1645-
* take in the value from the "range" parameter and see if
1646-
* we should make a min/max/range slider.
1647+
* trim the values array based on whether the property
1648+
* for 'range' is 'min', 'max', or truthy.
16471649
* @param {array} values the input values for the rangeSlider
16481650
* @return {array} the range array for creating a rangeSlider
16491651
**/
@@ -1751,6 +1753,11 @@ function instance$1($$self, $$props, $$invalidate) {
17511753
* @return {number} the value that was moved to (after alignment/clamping)
17521754
**/
17531755
function moveHandle(index, value) {
1756+
// align & clamp the value so we're not doing extra
1757+
// calculation on an out-of-range value down below
1758+
value = alignValueToStep(value);
1759+
1760+
// if this is a range slider
17541761
if (range) {
17551762
// restrict the handles of a range-slider from
17561763
// going past one-another unless "pushy" is true
@@ -1769,14 +1776,16 @@ function instance$1($$self, $$props, $$invalidate) {
17691776
}
17701777
}
17711778

1772-
// set the value for the handle, and align/clamp it
1773-
$$invalidate(0, values[index] = value, values);
1779+
// if the value has changed, update it
1780+
if (values[index] !== value) {
1781+
$$invalidate(0, values[index] = value, values);
1782+
}
17741783

17751784
// fire the change event when the handle moves,
17761785
// and store the previous value for the next time
1777-
if (previousValue !== alignValueToStep(value)) {
1786+
if (previousValue !== value) {
17781787
eChange();
1779-
previousValue = alignValueToStep(value);
1788+
previousValue = value;
17801789
}
17811790
}
17821791

@@ -1888,7 +1897,7 @@ function instance$1($$self, $$props, $$invalidate) {
18881897
$$invalidate(22, activeHandle = getClosestHandle(clientPos));
18891898

18901899
// fire the start event
1891-
startValue = values[activeHandle];
1900+
startValue = previousValue = alignValueToStep(values[activeHandle]);
18921901

18931902
eStart();
18941903

@@ -1986,25 +1995,28 @@ function instance$1($$self, $$props, $$invalidate) {
19861995
function eStart() {
19871996
dispatch("start", {
19881997
activeHandle,
1989-
value: alignValueToStep(startValue),
1998+
value: startValue,
19901999
values: values.map(v => alignValueToStep(v))
19912000
});
19922001
}
19932002

19942003
function eStop() {
19952004
dispatch("stop", {
19962005
activeHandle,
1997-
startValue: alignValueToStep(startValue),
1998-
value: alignValueToStep(values[activeHandle]),
2006+
startValue,
2007+
value: values[activeHandle],
19992008
values: values.map(v => alignValueToStep(v))
20002009
});
20012010
}
20022011

20032012
function eChange() {
20042013
dispatch("change", {
20052014
activeHandle,
2006-
previousValue: alignValueToStep(previousValue) || alignValueToStep(startValue) || alignValueToStep(values[activeHandle]),
2007-
value: alignValueToStep(values[activeHandle]),
2015+
startValue,
2016+
previousValue: typeof previousValue === "undefined"
2017+
? startValue
2018+
: previousValue,
2019+
value: values[activeHandle],
20082020
values: values.map(v => alignValueToStep(v))
20092021
});
20102022
}
@@ -2096,8 +2108,8 @@ function instance$1($$self, $$props, $$invalidate) {
20962108
}
20972109

20982110
if ($$self.$$.dirty[0] & /*values*/ 1 | $$self.$$.dirty[1] & /*alignValueToStep*/ 32768) {
2099-
// watch the values array, and trim / clamp the values to the steps
2100-
// and boundaries set up in the slider on change
2111+
// check the values array, and trim it if needed (range)
2112+
// and clamp the values to the steps and boundaries set up in the slider
21012113
$$invalidate(0, values = trimRange(values).map(v => alignValueToStep(v)));
21022114
}
21032115

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "svelte-range-slider-pips",
3-
"version": "1.6.0",
3+
"version": "1.6.1",
44
"svelte": "src/index.js",
55
"module": "dist/svelte-range-slider-pips.mjs",
66
"main": "dist/svelte-range-slider-pips.js",

0 commit comments

Comments
 (0)