- fix a little bit of reactivity for some props

  - rangeGapMin/Max
    - was not properly updating if changed from outside
  - rangeFormatter
    - also

- improve some comments
- remove uneeded variable
- update tests to cover some reactive prop changes

Author: simeydotme

README.md

@@ -69,7 +69,7 @@ npm install svelte-range-slider-pips --save-dev  # if you prefer npm
 
 > **Note:** Please read the [upgrade guide](./docs/upgrade.md) for details, as there's some changes which might break your styling/ui.
 
-### In a svelte 4/5 project
+### In a svelte 4 project
 
 Assuming you have a Svelte app up and running;
 
@@ -92,6 +92,15 @@ Assuming you have a Svelte app up and running;
 
 ---
 
+### In a svelte 5 project
+
+Svelte 5 works almost exactly the same as Svelte 4.
+
+⚠ **Note:** Runes Mode -- specifically `$state()` -- has some issues when binding with an `<input />` element.
+My suggestion would be to use legacy mode if you can (not runes), or [read this issue for a workaround.](https://github.com/simeydotme/svelte-range-slider-pips/issues/174)
+
+---
+
 ### In a svelte 3 project
 
 ⚠ _Version 3 of Range Slider Pips is not compatible with Svelte 3. [see below](#svelte-3)_

dist/range-slider-pips.js

@@ -144,6 +144,10 @@ const checkFormatters = () => {
     console.error("handleFormatter must be a function");
     handleFormatter = formatter;
   }
+  if (rangeFormatter === void 0) {
+    console.error("rangeFormatter must be a function, or null");
+    rangeFormatter = null;
+  }
 };
 checkMinMax();
 checkValueIsNumber();
@@ -155,13 +159,15 @@ $: values, updateValue();
 $: ariaLabels, checkAriaLabels();
 $: min, checkMinMax();
 $: max, checkMinMax();
+$: rangeGapMin, checkValuesAgainstRangeGaps();
+$: rangeGapMax, checkValuesAgainstRangeGaps();
 $: formatter, checkFormatters();
 $: handleFormatter, checkFormatters();
+$: rangeFormatter, checkFormatters();
 $: hasRange = range === true && values.length === 2 || (range === "min" || range === "max") && values.length === 1;
 $: {
-  const trimmedAlignedValues = trimRange(
-    values.map((v) => constrainAndAlignValue(v, min, max, step, precision, limits))
-  );
+  const trimmedValues = trimRange(values);
+  const trimmedAlignedValues = trimmedValues.map((v) => constrainAndAlignValue(v, min, max, step, precision, limits));
   if (!(values.length === trimmedAlignedValues.length) || !values.every((element, index) => coerceFloat(element, precision) === trimmedAlignedValues[index])) {
     values = trimmedAlignedValues;
   }
@@ -171,12 +177,14 @@ $: {
       springValues
     );
   } else {
-    requestAnimationFrame(() => {
-      springPositions.set(
-        values.map((v) => valueAsPercent(v, min, max)),
-        { hard: !spring }
-      );
-    });
+    if (slider) {
+      requestAnimationFrame(() => {
+        springPositions.set(
+          values.map((v) => valueAsPercent(v, min, max)),
+          { hard: !spring }
+        );
+      });
+    }
   }
   valueLength = values.length;
 }
@@ -533,7 +541,6 @@ function ariaLabelFormatter(value2, index) {
 >
   {#each values as value, index}
     {@const zindex = `${focus && activeHandle === index ? 3 : ''}`}
-    {@const translate = `calc((${sliderSize}px * ${$springPositions[index] / 100}))`}
     <span
       role="slider"
       class="rangeHandle"

dist/range-slider-pips.mjs

@@ -1,6 +1,6 @@
 {
   "name": "svelte-range-slider-pips",
-  "version": "4.0.1",
+  "version": "4.0.2",
   "description": "Multi-Thumb, Accessible, Beautiful Range Slider with Pips",
   "repository": {
     "type": "git",

dist/svelte/components/RangeSlider.svelte

@@ -104,7 +104,7 @@
     }
   };
 
-  // check that "value" is a number, or set it as the average
+  // check that "value" is a number, or set it as the first value in the values array
   const updateValue = () => {
     checkValueIsNumber();
     // sync value with values
@@ -184,6 +184,10 @@
       console.error('handleFormatter must be a function');
       handleFormatter = formatter;
     }
+    if (rangeFormatter === undefined) {
+      console.error('rangeFormatter must be a function, or null');
+      rangeFormatter = null;
+    }
   };
 
   // fixup the value/values at render
@@ -199,17 +203,20 @@
   $: ariaLabels, checkAriaLabels();
   $: min, checkMinMax();
   $: max, checkMinMax();
+  $: rangeGapMin, checkValuesAgainstRangeGaps();
+  $: rangeGapMax, checkValuesAgainstRangeGaps();
   $: formatter, checkFormatters();
   $: handleFormatter, checkFormatters();
+  $: rangeFormatter, checkFormatters();
   $: hasRange =
     (range === true && values.length === 2) || ((range === 'min' || range === 'max') && values.length === 1);
 
   $: {
-    // trim the range so it remains as a min/max (only 2 handles)
-    // and also align the handles to the steps
-    const trimmedAlignedValues = trimRange(
-      values.map((v) => constrainAndAlignValue(v, min, max, step, precision, limits))
-    );
+    // if a range, then trim so it remains as a min/max (only 2 handles)
+    const trimmedValues = trimRange(values);
+    // and also align the handles to the steps/limits
+    const trimmedAlignedValues = trimmedValues.map((v) => constrainAndAlignValue(v, min, max, step, precision, limits));
+    // update the values if they needed to be fixed
     if (
       !(values.length === trimmedAlignedValues.length) ||
       !values.every((element, index) => coerceFloat(element, precision) === trimmedAlignedValues[index])
@@ -230,12 +237,14 @@
     } else {
       // update the value of the spring function for animated handles
       // whenever the values has updated
-      requestAnimationFrame(() => {
-        springPositions.set(
-          values.map((v) => valueAsPercent(v, min, max)),
-          { hard: !spring }
-        );
-      });
+      if (slider) {
+        requestAnimationFrame(() => {
+          springPositions.set(
+            values.map((v) => valueAsPercent(v, min, max)),
+            { hard: !spring }
+          );
+        });
+      }
     }
     // set the valueLength for the next check
     valueLength = values.length;
@@ -791,7 +800,6 @@
 >
   {#each values as value, index}
     {@const zindex = `${focus && activeHandle === index ? 3 : ''}`}
-    {@const translate = `calc((${sliderSize}px * ${$springPositions[index] / 100}))`}
     <span
       role="slider"
       class="rangeHandle"

package.json

@@ -155,6 +155,10 @@
         "name": "binding",
         "path": "",
         "children": [
+          {
+            "name": "minmax",
+            "path": "/test/range-slider/values/binding/minmax"
+          },
           {
             "name": "multiple",
             "path": "/test/range-slider/values/binding/multiple"

src/lib/components/RangeSlider.svelte

@@ -1,5 +1,15 @@
 <script lang="ts">
   import RangeSlider from '$lib/components/RangeSlider.svelte';
+
+  // Dynamic min/max state for testing
+  let dynamicMin = 0;
+  let dynamicMax = 100;
+  let dynamicValues = [25, 75];
+
+  // Toggle state for min/max changes
+  let toggleMin = 0;
+  let toggleMax = 100;
+  let toggleValues = [30, 70];
 </script>
 
 <div class="slider-list">
@@ -112,4 +122,82 @@
 
   <h3>Infinite values</h3>
   <RangeSlider id="invalid-infinite" pips first="label" last="label" min={-Infinity} max={Infinity} />
+
+  <h2>Dynamic Min/Max Tests</h2>
+  <h3>Dynamic min/max with bound inputs</h3>
+  <RangeSlider
+    id="dynamic-minmax"
+    pips
+    all="label"
+    float
+    bind:min={dynamicMin}
+    bind:max={dynamicMax}
+    bind:values={dynamicValues}
+  />
+  <div class="controls">
+    <label>
+      Min: <input type="number" bind:value={dynamicMin} step="any" />
+    </label>
+    <label>
+      Max: <input type="number" bind:value={dynamicMax} step="any" />
+    </label>
+    <p>Current values: {dynamicValues}</p>
+  </div>
+
+  <h3>Dynamic min/max with toggle buttons</h3>
+  <RangeSlider
+    id="toggle-minmax"
+    pips
+    all="label"
+    float
+    bind:min={toggleMin}
+    bind:max={toggleMax}
+    bind:values={toggleValues}
+  />
+  <div class="controls">
+    <button id="btn_toggle_min_positive" on:click={() => (toggleMin = 20)}>Set Min to 20</button>
+    <button id="btn_toggle_min_negative" on:click={() => (toggleMin = -50)}>Set Min to -50</button>
+    <button id="btn_toggle_min_decimal" on:click={() => (toggleMin = 10.5)}>Set Min to 10.5</button>
+    <button id="btn_toggle_min_zero" on:click={() => (toggleMin = 0)}>Set Min to 0</button>
+    <button id="btn_toggle_max_small" on:click={() => (toggleMax = 50)}>Set Max to 50</button>
+    <button id="btn_toggle_max_negative" on:click={() => (toggleMax = -20)}>Set Max to -20</button>
+    <button id="btn_toggle_max_decimal" on:click={() => (toggleMax = 75.5)}>Set Max to 75.5</button>
+    <button id="btn_toggle_max_large" on:click={() => (toggleMax = 1000)}>Set Max to 1000</button>
+    <button
+      id="btn_toggle_both_positive"
+      on:click={() => {
+        toggleMin = 20;
+        toggleMax = 80;
+      }}>Set Range 20-80</button
+    >
+    <button
+      id="btn_toggle_both_negative"
+      on:click={() => {
+        toggleMin = -80;
+        toggleMax = -20;
+      }}>Set Range -80 to -20</button
+    >
+    <button
+      id="btn_toggle_both_cross_zero"
+      on:click={() => {
+        toggleMin = -50;
+        toggleMax = 50;
+      }}>Set Range -50 to 50</button
+    >
+    <button
+      id="btn_toggle_both_decimal"
+      on:click={() => {
+        toggleMin = 10.5;
+        toggleMax = 90.5;
+      }}>Set Range 10.5 to 90.5</button
+    >
+    <p>Current values: {toggleValues}</p>
+  </div>
 </div>
+
+<style>
+  .controls {
+    display: grid;
+    grid-template-columns: repeat(4, max-content);
+  }
+</style>

src/routes/test/nav/test-nav.json

@@ -1,18 +1,57 @@
 <script lang="ts">
   import RangeSlider from '$components/RangeSlider.svelte';
+
+  // State for the toggle tests
+  let isRange = false;
+  let toggleValues = [15, 45, 75];
+
+  let isRangeMin = false;
+  let toggleMinValues = [30, 60, 80];
+
+  let isRangeMax = false;
+  let toggleMaxValues = [20, 50, 70];
 </script>
 
 <div class="slider-list">
   <h5>Single handle range sliders <em>(should not be a range due to only one value)</em></h5>
-  <RangeSlider id="single-handle-true" range={true} values={[40]} />
-  <RangeSlider id="single-handle-true-value" range={true} value={40} />
+  <RangeSlider id="single-handle-true" range values={[40]} />
+  <RangeSlider id="single-handle-true-value" range value={40} />
 
   <h5>Double handle range sliders</h5>
-  <RangeSlider id="double-handle-true" range={true} values={[25, 75]} />
-  <RangeSlider id="double-handle-true-negative" range={true} values={[-75, 25]} min={-100} max={100} />
-  <RangeSlider id="double-handle-true-constrained" range={true} values={[-130, 125]} min={-100} max={100} />
+  <RangeSlider id="double-handle-true" range values={[25, 75]} />
+  <RangeSlider id="double-handle-true-negative" range values={[-75, 25]} min={-100} max={100} />
+  <RangeSlider id="double-handle-true-constrained" range values={[-130, 125]} min={-100} max={100} />
 
   <h5>Triple handle range sliders <em>(should trim to double handle)</em></h5>
-  <RangeSlider id="triple-handle-true" range={true} values={[15, 45, 75]} />
-  <RangeSlider id="triple-handle-true-negative" range={true} values={[-75, 55, 15]} min={-50} />
+  <RangeSlider id="triple-handle-true" range values={[15, 45, 75]} />
+  <RangeSlider id="triple-handle-true-negative" range values={[-75, 55, 15]} min={-50} />
+
+  <hr />
+
+  <h5>Toggle range mode test</h5>
+  <RangeSlider id="toggle-range-test" range={isRange} bind:values={toggleValues} />
+  <div class="controls">
+    <button id="btn_toggle_range" on:click={() => (isRange = !isRange)}>
+      Toggle Range Mode ({isRange ? 'true' : 'false'})
+    </button>
+    <p>Current values: {toggleValues}</p>
+  </div>
+
+  <h5>Toggle range="min" mode test</h5>
+  <RangeSlider id="toggle-range-min-test" range={isRangeMin ? 'min' : false} bind:values={toggleMinValues} />
+  <div class="controls">
+    <button id="btn_toggle_range_min" on:click={() => (isRangeMin = !isRangeMin)}>
+      Toggle Range Min Mode ({isRangeMin ? 'true' : 'false'})
+    </button>
+    <p>Current values: {toggleMinValues}</p>
+  </div>
+
+  <h5>Toggle range="max" mode test</h5>
+  <RangeSlider id="toggle-range-max-test" range={isRangeMax ? 'max' : false} bind:values={toggleMaxValues} />
+  <div class="controls">
+    <button id="btn_toggle_range_max" on:click={() => (isRangeMax = !isRangeMax)}>
+      Toggle Range Max Mode ({isRangeMax ? 'true' : 'false'})
+    </button>
+    <p>Current values: {toggleMaxValues}</p>
+  </div>
 </div>

src/routes/test/range-slider/minmax/+page.svelte

@@ -106,7 +106,17 @@
 
   <h2>Dynamic Gap Tests</h2>
   <h3>Dynamic gaps - gap constraints can be updated at runtime</h3>
-  <RangeSlider id="dynamic-gaps" range values={dynamicValues} rangeGapMin={dynamicGapMin} rangeGapMax={dynamicGapMax} />
+  <RangeSlider
+    id="dynamic-gaps"
+    range
+    bind:values={dynamicValues}
+    bind:rangeGapMin={dynamicGapMin}
+    bind:rangeGapMax={dynamicGapMax}
+    on:change={handleChange}
+    on:start={handleStart}
+    on:stop={handleStop}
+  />
+  {dynamicValues} / min: {dynamicGapMin} / max: {dynamicGapMax}
   <div class="controls">
     <button id="btn_increase_min" on:click={() => (dynamicGapMin += 5)}>Increase Min Gap</button>
     <button id="btn_decrease_min" on:click={() => (dynamicGapMin -= 5)}>Decrease Min Gap</button>