Skip to content

Commit 0e1b90a

Browse files
simeydotmesimeydotme
committed
fix toggling range on/off
- manually add 'range' into reactive functionality - fixes the tests failing
1 parent 538ebb2 commit 0e1b90a

File tree

6 files changed

+144
-141
lines changed

6 files changed

+144
-141
lines changed

‎dist/range-slider-pips.js‎

Lines changed: 66 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
/**
2-
* svelte-range-slider-pips ~ 4.0.2
2+
* svelte-range-slider-pips ~ 4.0.3
33
* Multi-Thumb, Accessible, Beautiful Range Slider with Pips
44
* Project home: https://simeydotme.github.io/svelte-range-slider-pips/
55
* © 2025 Simon Goellner <[email protected]> ~ MPL-2.0 License
6-
* Published: 21/6/2025
6+
* Published: 23/6/2025
77
*/
88
(function (global, factory) {
99
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
@@ -2915,38 +2915,38 @@
29152915
: [/*values*/ child_ctx[3][0], /*values*/ child_ctx[3][1]];
29162916

29172917
child_ctx[31] = constants_0[0];
2918-
child_ctx[92] = constants_0[1];
2918+
child_ctx[91] = constants_0[1];
29192919
return child_ctx;
29202920
}
29212921

29222922
function get_each_context(ctx, list, i) {
29232923
const child_ctx = ctx.slice();
29242924
child_ctx[8] = list[i];
2925-
child_ctx[95] = i;
2925+
child_ctx[94] = i;
29262926

2927-
const constants_0 = `${/*focus*/ child_ctx[34] && /*activeHandle*/ child_ctx[37] === /*index*/ child_ctx[95]
2927+
const constants_0 = `${/*focus*/ child_ctx[34] && /*activeHandle*/ child_ctx[37] === /*index*/ child_ctx[94]
29282928
? 3
29292929
: ''}`;
29302930

2931-
child_ctx[93] = constants_0;
2931+
child_ctx[92] = constants_0;
29322932
return child_ctx;
29332933
}
29342934

29352935
function get_if_ctx(ctx) {
29362936
const child_ctx = ctx.slice();
29372937
const constants_0 = valueAsPercent(/*value*/ child_ctx[8], /*min*/ child_ctx[1], /*max*/ child_ctx[2], /*precision*/ child_ctx[9]);
2938-
child_ctx[96] = constants_0;
2939-
const constants_1 = /*handleFormatter*/ child_ctx[5](/*value*/ child_ctx[8], /*index*/ child_ctx[95], /*percent*/ child_ctx[96]);
2940-
child_ctx[97] = constants_1;
2938+
child_ctx[95] = constants_0;
2939+
const constants_1 = /*handleFormatter*/ child_ctx[5](/*value*/ child_ctx[8], /*index*/ child_ctx[94], /*percent*/ child_ctx[95]);
2940+
child_ctx[96] = constants_1;
29412941
return child_ctx;
29422942
}
29432943

2944-
// (775:6) {#if float}
2944+
// (776:6) {#if float}
29452945
function create_if_block_9(ctx) {
29462946
let span;
29472947
let if_block0_anchor;
29482948
let html_tag;
2949-
let raw_value = /*formattedValue*/ ctx[97] + "";
2949+
let raw_value = /*formattedValue*/ ctx[96] + "";
29502950
let html_anchor;
29512951
let if_block0 = /*prefix*/ ctx[25] && create_if_block_11(ctx);
29522952
let if_block1 = /*suffix*/ ctx[26] && create_if_block_10(ctx);
@@ -2984,7 +2984,7 @@
29842984
if_block0 = null;
29852985
}
29862986

2987-
if (dirty[0] & /*handleFormatter, values, min, max, precision*/ 558 && raw_value !== (raw_value = /*formattedValue*/ ctx[97] + "")) html_tag.p(raw_value);
2987+
if (dirty[0] & /*handleFormatter, values, min, max, precision*/ 558 && raw_value !== (raw_value = /*formattedValue*/ ctx[96] + "")) html_tag.p(raw_value);
29882988

29892989
if (/*suffix*/ ctx[26]) {
29902990
if (if_block1) {
@@ -3010,7 +3010,7 @@
30103010
};
30113011
}
30123012

3013-
// (779:10) {#if prefix}
3013+
// (780:10) {#if prefix}
30143014
function create_if_block_11(ctx) {
30153015
let span;
30163016
let t;
@@ -3036,7 +3036,7 @@
30363036
};
30373037
}
30383038

3039-
// (779:95) {#if suffix}
3039+
// (780:95) {#if suffix}
30403040
function create_if_block_10(ctx) {
30413041
let span;
30423042
let t;
@@ -3062,7 +3062,7 @@
30623062
};
30633063
}
30643064

3065-
// (752:2) {#each values as value, index}
3065+
// (753:2) {#each values as value, index}
30663066
function create_each_block(ctx) {
30673067
let span1;
30683068
let span0;
@@ -3088,26 +3088,26 @@
30883088
attr(span0, "class", "rangeNub");
30893089
attr(span1, "role", "slider");
30903090
attr(span1, "class", "rangeHandle");
3091-
attr(span1, "data-handle", /*index*/ ctx[95]);
3092-
attr(span1, "style", span1_style_value = "z-index: " + /*zindex*/ ctx[93] + "; " + (/*isMounted*/ ctx[33] ? '' : 'opacity: 0;'));
3093-
attr(span1, "aria-label", span1_aria_label_value = /*ariaLabels*/ ctx[7][/*index*/ ctx[95]]);
3091+
attr(span1, "data-handle", /*index*/ ctx[94]);
3092+
attr(span1, "style", span1_style_value = "z-index: " + /*zindex*/ ctx[92] + "; " + (/*isMounted*/ ctx[33] ? '' : 'opacity: 0;'));
3093+
attr(span1, "aria-label", span1_aria_label_value = /*ariaLabels*/ ctx[7][/*index*/ ctx[94]]);
30943094

3095-
attr(span1, "aria-valuemin", span1_aria_valuemin_value = /*range*/ ctx[10] === true && /*index*/ ctx[95] === 1
3095+
attr(span1, "aria-valuemin", span1_aria_valuemin_value = /*range*/ ctx[10] === true && /*index*/ ctx[94] === 1
30963096
? /*values*/ ctx[3][0]
30973097
: /*min*/ ctx[1]);
30983098

3099-
attr(span1, "aria-valuemax", span1_aria_valuemax_value = /*range*/ ctx[10] === true && /*index*/ ctx[95] === 0
3099+
attr(span1, "aria-valuemax", span1_aria_valuemax_value = /*range*/ ctx[10] === true && /*index*/ ctx[94] === 0
31003100
? /*values*/ ctx[3][1]
31013101
: /*max*/ ctx[2]);
31023102

31033103
attr(span1, "aria-valuenow", span1_aria_valuenow_value = /*value*/ ctx[8]);
3104-
attr(span1, "aria-valuetext", span1_aria_valuetext_value = /*ariaLabelFormatter*/ ctx[56](/*value*/ ctx[8], /*index*/ ctx[95]));
3104+
attr(span1, "aria-valuetext", span1_aria_valuetext_value = /*ariaLabelFormatter*/ ctx[56](/*value*/ ctx[8], /*index*/ ctx[94]));
31053105
attr(span1, "aria-orientation", span1_aria_orientation_value = /*vertical*/ ctx[13] ? 'vertical' : 'horizontal');
31063106
attr(span1, "aria-disabled", /*disabled*/ ctx[18]);
31073107
attr(span1, "tabindex", span1_tabindex_value = /*disabled*/ ctx[18] ? -1 : 0);
3108-
toggle_class(span1, "rsActive", /*focus*/ ctx[34] && /*activeHandle*/ ctx[37] === /*index*/ ctx[95]);
3109-
toggle_class(span1, "rsPress", /*handlePressed*/ ctx[35] && /*activeHandle*/ ctx[37] === /*index*/ ctx[95]);
3110-
set_style(span1, "--handle-pos", /*$springPositions*/ ctx[42][/*index*/ ctx[95]]);
3108+
toggle_class(span1, "rsActive", /*focus*/ ctx[34] && /*activeHandle*/ ctx[37] === /*index*/ ctx[94]);
3109+
toggle_class(span1, "rsPress", /*handlePressed*/ ctx[35] && /*activeHandle*/ ctx[37] === /*index*/ ctx[94]);
3110+
set_style(span1, "--handle-pos", /*$springPositions*/ ctx[42][/*index*/ ctx[94]]);
31113111
},
31123112
m(target, anchor) {
31133113
insert(target, span1, anchor);
@@ -3139,21 +3139,21 @@
31393139
if_block = null;
31403140
}
31413141

3142-
if (dirty[1] & /*focus, activeHandle, isMounted*/ 76 && span1_style_value !== (span1_style_value = "z-index: " + /*zindex*/ ctx[93] + "; " + (/*isMounted*/ ctx[33] ? '' : 'opacity: 0;'))) {
3142+
if (dirty[1] & /*focus, activeHandle, isMounted*/ 76 && span1_style_value !== (span1_style_value = "z-index: " + /*zindex*/ ctx[92] + "; " + (/*isMounted*/ ctx[33] ? '' : 'opacity: 0;'))) {
31433143
attr(span1, "style", span1_style_value);
31443144
}
31453145

3146-
if (dirty[0] & /*ariaLabels*/ 128 && span1_aria_label_value !== (span1_aria_label_value = /*ariaLabels*/ ctx[7][/*index*/ ctx[95]])) {
3146+
if (dirty[0] & /*ariaLabels*/ 128 && span1_aria_label_value !== (span1_aria_label_value = /*ariaLabels*/ ctx[7][/*index*/ ctx[94]])) {
31473147
attr(span1, "aria-label", span1_aria_label_value);
31483148
}
31493149

3150-
if (dirty[0] & /*range, values, min*/ 1034 && span1_aria_valuemin_value !== (span1_aria_valuemin_value = /*range*/ ctx[10] === true && /*index*/ ctx[95] === 1
3150+
if (dirty[0] & /*range, values, min*/ 1034 && span1_aria_valuemin_value !== (span1_aria_valuemin_value = /*range*/ ctx[10] === true && /*index*/ ctx[94] === 1
31513151
? /*values*/ ctx[3][0]
31523152
: /*min*/ ctx[1])) {
31533153
attr(span1, "aria-valuemin", span1_aria_valuemin_value);
31543154
}
31553155

3156-
if (dirty[0] & /*range, values, max*/ 1036 && span1_aria_valuemax_value !== (span1_aria_valuemax_value = /*range*/ ctx[10] === true && /*index*/ ctx[95] === 0
3156+
if (dirty[0] & /*range, values, max*/ 1036 && span1_aria_valuemax_value !== (span1_aria_valuemax_value = /*range*/ ctx[10] === true && /*index*/ ctx[94] === 0
31573157
? /*values*/ ctx[3][1]
31583158
: /*max*/ ctx[2])) {
31593159
attr(span1, "aria-valuemax", span1_aria_valuemax_value);
@@ -3163,7 +3163,7 @@
31633163
attr(span1, "aria-valuenow", span1_aria_valuenow_value);
31643164
}
31653165

3166-
if (dirty[0] & /*values*/ 8 && span1_aria_valuetext_value !== (span1_aria_valuetext_value = /*ariaLabelFormatter*/ ctx[56](/*value*/ ctx[8], /*index*/ ctx[95]))) {
3166+
if (dirty[0] & /*values*/ 8 && span1_aria_valuetext_value !== (span1_aria_valuetext_value = /*ariaLabelFormatter*/ ctx[56](/*value*/ ctx[8], /*index*/ ctx[94]))) {
31673167
attr(span1, "aria-valuetext", span1_aria_valuetext_value);
31683168
}
31693169

@@ -3180,17 +3180,17 @@
31803180
}
31813181

31823182
if (dirty[1] & /*focus, activeHandle*/ 72) {
3183-
toggle_class(span1, "rsActive", /*focus*/ ctx[34] && /*activeHandle*/ ctx[37] === /*index*/ ctx[95]);
3183+
toggle_class(span1, "rsActive", /*focus*/ ctx[34] && /*activeHandle*/ ctx[37] === /*index*/ ctx[94]);
31843184
}
31853185

31863186
if (dirty[1] & /*handlePressed, activeHandle*/ 80) {
3187-
toggle_class(span1, "rsPress", /*handlePressed*/ ctx[35] && /*activeHandle*/ ctx[37] === /*index*/ ctx[95]);
3187+
toggle_class(span1, "rsPress", /*handlePressed*/ ctx[35] && /*activeHandle*/ ctx[37] === /*index*/ ctx[94]);
31883188
}
31893189

31903190
const style_changed = dirty[1] & /*focus, activeHandle, isMounted*/ 76;
31913191

31923192
if (dirty[1] & /*$springPositions, focus, activeHandle, isMounted*/ 2124 || style_changed) {
3193-
set_style(span1, "--handle-pos", /*$springPositions*/ ctx[42][/*index*/ ctx[95]]);
3193+
set_style(span1, "--handle-pos", /*$springPositions*/ ctx[42][/*index*/ ctx[94]]);
31943194
}
31953195
},
31963196
d(detaching) {
@@ -3205,7 +3205,7 @@
32053205
};
32063206
}
32073207

3208-
// (786:2) {#if limits}
3208+
// (787:2) {#if limits}
32093209
function create_if_block_8(ctx) {
32103210
let span;
32113211
let span_style_value;
@@ -3232,7 +3232,7 @@
32323232
};
32333233
}
32343234

3235-
// (793:2) {#if hasRange}
3235+
// (794:2) {#if hasRange}
32363236
function create_if_block_1(ctx) {
32373237
let span;
32383238
let span_style_value;
@@ -3299,7 +3299,7 @@
32993299
};
33003300
}
33013301

3302-
// (802:6) {#if rangeFloat}
3302+
// (803:6) {#if rangeFloat}
33033303
function create_if_block_2(ctx) {
33043304
let span;
33053305

@@ -3349,7 +3349,7 @@
33493349
};
33503350
}
33513351

3352-
// (811:10) {:else}
3352+
// (812:10) {:else}
33533353
function create_else_block(ctx) {
33543354
let if_block0_anchor;
33553355
let html_tag;
@@ -3364,7 +3364,7 @@
33643364
let t4;
33653365
let if_block2_anchor;
33663366
let html_tag_1;
3367-
let raw1_value = /*second*/ ctx[92] + "";
3367+
let raw1_value = /*second*/ ctx[91] + "";
33683368
let html_anchor_1;
33693369
let if_block3_anchor;
33703370
let if_block0 = /*prefix*/ ctx[25] && create_if_block_7(ctx);
@@ -3453,7 +3453,7 @@
34533453
if_block2 = null;
34543454
}
34553455

3456-
if (dirty[0] & /*reversed, values*/ 65544 && raw1_value !== (raw1_value = /*second*/ ctx[92] + "")) html_tag_1.p(raw1_value);
3456+
if (dirty[0] & /*reversed, values*/ 65544 && raw1_value !== (raw1_value = /*second*/ ctx[91] + "")) html_tag_1.p(raw1_value);
34573457

34583458
if (/*suffix*/ ctx[26]) {
34593459
if (if_block3) {
@@ -3492,7 +3492,7 @@
34923492
};
34933493
}
34943494

3495-
// (804:10) {#if rangeFormatter}
3495+
// (805:10) {#if rangeFormatter}
34963496
function create_if_block_3(ctx) {
34973497
let html_tag;
34983498
let raw_value = /*rangeFormatter*/ ctx[6](/*values*/ ctx[3][0], /*values*/ ctx[3][1], valueAsPercent(/*values*/ ctx[3][0], /*min*/ ctx[1], /*max*/ ctx[2], /*precision*/ ctx[9]), valueAsPercent(/*values*/ ctx[3][1], /*min*/ ctx[1], /*max*/ ctx[2], /*precision*/ ctx[9])) + "";
@@ -3520,7 +3520,7 @@
35203520
};
35213521
}
35223522

3523-
// (813:12) {#if prefix}
3523+
// (814:12) {#if prefix}
35243524
function create_if_block_7(ctx) {
35253525
let span;
35263526
let t;
@@ -3546,7 +3546,7 @@
35463546
};
35473547
}
35483548

3549-
// (813:88) {#if suffix}
3549+
// (814:88) {#if suffix}
35503550
function create_if_block_6(ctx) {
35513551
let span;
35523552
let t;
@@ -3572,7 +3572,7 @@
35723572
};
35733573
}
35743574

3575-
// (817:12) {#if prefix}
3575+
// (818:12) {#if prefix}
35763576
function create_if_block_5(ctx) {
35773577
let span;
35783578
let t;
@@ -3598,7 +3598,7 @@
35983598
};
35993599
}
36003600

3601-
// (817:89) {#if suffix}
3601+
// (818:89) {#if suffix}
36023602
function create_if_block_4(ctx) {
36033603
let span;
36043604
let t;
@@ -3624,7 +3624,7 @@
36243624
};
36253625
}
36263626

3627-
// (825:2) {#if pips}
3627+
// (826:2) {#if pips}
36283628
function create_if_block(ctx) {
36293629
let rangepips;
36303630
let current;
@@ -3961,6 +3961,25 @@
39613961
};
39623962
}
39633963

3964+
/**
3965+
* trim the values array based on whether the property
3966+
* for 'range' is 'min', 'max', or truthy. This is because we
3967+
* do not want more than one handle for a min/max range, and we do
3968+
* not want more than two handles for a true range.
3969+
* @param {array} values the input values for the rangeSlider
3970+
* @param {boolean | 'min' | 'max'} range the range property of the rangeSlider
3971+
* @return {array} the range array for creating a rangeSlider
3972+
**/
3973+
function trimRange(values, range) {
3974+
if (range === 'min' || range === 'max') {
3975+
return values.slice(0, 1);
3976+
} else if (range) {
3977+
return values.slice(0, 2);
3978+
} else {
3979+
return values;
3980+
}
3981+
}
3982+
39643983
function instance($$self, $$props, $$invalidate) {
39653984
let hasRange;
39663985
let orientationStart;
@@ -4207,24 +4226,6 @@
42074226
return isHandle || isChild;
42084227
}
42094228

4210-
/**
4211-
* trim the values array based on whether the property
4212-
* for 'range' is 'min', 'max', or truthy. This is because we
4213-
* do not want more than one handle for a min/max range, and we do
4214-
* not want more than two handles for a true range.
4215-
* @param {array} values the input values for the rangeSlider
4216-
* @return {array} the range array for creating a rangeSlider
4217-
**/
4218-
function trimRange(values) {
4219-
if (range === 'min' || range === 'max') {
4220-
return values.slice(0, 1);
4221-
} else if (range) {
4222-
return values.slice(0, 2);
4223-
} else {
4224-
return values;
4225-
}
4226-
}
4227-
42284229
/**
42294230
* helper to return closest handle to user interaction
42304231
* @param {object} clientPos the client {x,y} positions to check against
@@ -4747,16 +4748,16 @@
47474748
(updateValues());
47484749
}
47494750

4750-
if ($$self.$$.dirty[0] & /*values, min, max, step, precision, limits, slider*/ 528911 | $$self.$$.dirty[1] & /*springValues, springPositions, spring*/ 1610612738 | $$self.$$.dirty[2] & /*valueLength*/ 1) {
4751+
if ($$self.$$.dirty[0] & /*values, range, min, max, step, precision, limits, slider*/ 529935 | $$self.$$.dirty[1] & /*springValues, springPositions, spring*/ 1610612738 | $$self.$$.dirty[2] & /*valueLength*/ 1) {
47514752
{
47524753
// if a range, then trim so it remains as a min/max (only 2 handles)
4753-
const trimmedValues = trimRange(values);
4754+
const trimmedValues = trimRange(values, range);
47544755

47554756
// and also align the handles to the steps/limits
47564757
const trimmedAlignedValues = trimmedValues.map(v => constrainAndAlignValue(v, min, max, step, precision, limits));
47574758

47584759
// update the values if they needed to be fixed
4759-
if (!(values.length === trimmedAlignedValues.length) || !values.every((element, index) => coerceFloat(element, precision) === trimmedAlignedValues[index])) {
4760+
if (!(values.length === trimmedAlignedValues.length) || !values.every((item, i) => coerceFloat(item, precision) === trimmedAlignedValues[i])) {
47604761
$$invalidate(3, values = trimmedAlignedValues);
47614762
}
47624763

0 commit comments

Comments
 (0)