resolve issue with spring() and push() / pop()

resolves #22

After investigating, it seems that the original way I was handling the
spring function being updated one the values[] array change was not
accounting for new values in the array. so the spring function would
only apply to the original values, and no new ones.

Resolved this by explicitly re-setting the spring function values after
detecting a change in the length of the array, but only applying a
.set() function if the length has not changed.

Author: simeydotme

src/RangeSlider.svelte

@@ -41,6 +41,7 @@
   let slider;
 
   // state management
+  let valueLength = 0;
   let focus = false;
   let handleActivated = false;
   let handlePressed = false;
@@ -51,25 +52,35 @@
 
   // copy the initial values in to a spring function which
   // will update every time the values array is modified
+
   let springPositions;
 
   $: {
+
     // check that "values" is an array, or set it as array
     // to prevent any errors in springs, or range trimming
     if ( !Array.isArray( values ) ) {
       values = [(max + min) / 2];
       console.error( "'values' prop should be an Array (https://github.com/simeydotme/svelte-range-slider-pips#slider-props)" );
     }
-    // trim the range as needed
-    values = trimRange(values);
-    // clamp the values to the steps and boundaries set up in the slider
-    values = values.map((v) => alignValueToStep(v));
-    // update the spring function so that movement can happen in the UI
-    if ( springPositions ) {
-      springPositions.set(values.map((v) => percentOf(v)));
+    // trim the range so it remains as a min/max (only 2 handles)
+    // and also align the handles to the steps
+    values = trimRange(values.map((v) => alignValueToStep(v)));
+
+    // check if the valueLength (length of values[]) has changed,
+    // because if so we need to re-seed the spring function with the
+    // new values array.
+    if ( valueLength !== values.length ) {
+      // set the initial spring values when the slider initialises,
+      // or when values array length has changed
+      springPositions = spring(values.map((v) => percentOf(v)), springValues );
     } else {
-      springPositions = spring( values.map((v) => percentOf(v)), springValues );
+      // update the value of the spring function for animated handles
+      // whenever the values has updated
+      springPositions.set(values.map((v) => percentOf(v)));
     }
+    // set the valueLength for the next check
+    valueLength = values.length;
   };
 
   /**
@@ -795,7 +806,6 @@
       {suffix}
       {formatter}
       {focus}
-      {disabled}
       {percentOf} />
   {/if}
 </div>

test/public/testing.css

@@ -18,12 +18,19 @@ input {
     width: 100px;
 }
 
+hr {
+    height: 1px;
+    border: none;
+    border-bottom: 1px dashed rgb(125, 129, 138);
+    margin: 50px 0;
+}
+
 .rangeSlider.rangeSlider {
     margin: 60px;
 }
 
 h2,h3,h4 {
-    margin: 20px 0 10px;
+    margin: 30px 0 10px;
 }
 
 h2 + .rangeSlider.rangeSlider, h3 + .rangeSlider.rangeSlider, h4 + .rangeSlider.rangeSlider {

test/src/App.svelte

@@ -28,6 +28,16 @@
   let zeromax = 0;
 
   let disabled = false;
+
+  let arrayPush = [11,99];
+  let pushValues = () => {
+    values.push(Math.random()*100);
+    values = values
+  }
+  let popValues = () => {
+    values.pop();
+    values = values
+  }
   
 </script>
 
@@ -63,31 +73,22 @@
 
   <div class="content" style="--range-handle-focus: {color}; --range-handle: {lightColor}">
 
-    <RangeSlider vertical range values={[10,30]} pips all="label" {disabled} />
+    <RangeSlider vertical range values={[10,30]} pips all="label" />
     <RangeSlider vertical range="min" values={[10]} pips all />
     <RangeSlider vertical range="max" values={[30]} pips />
 
     <br>
     <h2>Spring & Colors Test</h2>
-    <RangeSlider id="test-id" springValues={{ stiffness: 0.03, damping: 0.08 }} values={[30,50,70]} />
+    <RangeSlider id="test-id" springValues={{ stiffness: 0.03, damping: 0.08 }} bind:values />
     <br>
- 
-    <RangeSlider bind:values {disabled} 
-      on:start={(e) => { console.log("start",e.detail)}}
-      on:stop={(e) => { console.log("end",e.detail)}} 
-      on:change={(e) => { console.log("change",e.detail)}} 
-    />
-    <hr>
-    {values}
-    <br>
-    <input type="number" bind:value={values[0]} />
-    <input type="number" bind:value={values[1]} />
-    <input type="number" bind:value={values[2]} />
-    <input type="number" bind:value={values[3]} />
-    <hr>
+    
+    
     <RangeSlider float />
     <RangeSlider float pips all="label" />
-    <RangeSlider float pips first="label" last="label"  {disabled} />
+    <RangeSlider float pips first="label" last="label" {disabled} />
+    <h2>trim/align</h2>
+    <RangeSlider values="{[-10,12,103]}" float pips step={5} all="label" {disabled} />
+    <h2>events</h2>
     <RangeSlider float pips first="label" last="label" rest="label"
       on:start={(e) => { console.log("start",e.detail)}}
       on:stop={(e) => { console.log("stop",e.detail)}} 
@@ -140,9 +141,27 @@
     <RangeSlider bind:values={zero} min={zeromin} max={zeromax} range float pips all="label" step={1} pipstep={5} />
     <br><button on:click={()=>{ zeromin = 10; zeromax = 30; zero = [3,70]; }}>increase min/max</button> - {zero} 
 
-    <RangeSlider bind:values  float pips all="label" {disabled} />
+    <h2>disable / enable</h2>
+    <RangeSlider bind:values float pips all="label" {disabled} />
     <button on:click={()=>{disabled=!disabled}}>toggle disabled</button>
 
+    <h2>push & pop values</h2>
+    <RangeSlider bind:values float pips all="label" />
+    <button on:click={pushValues}>push</button>
+    <button on:click={popValues}>pop</button>
+    <br>({values})
+    
+    <h2>Binding to inputs</h2>
+    <RangeSlider bind:values {disabled} 
+      on:start={(e) => { console.log("start",e.detail)}}
+      on:stop={(e) => { console.log("end",e.detail)}} 
+      on:change={(e) => { console.log("change",e.detail)}} 
+    />
+    {#each values as v}
+      <input type="number" bind:value={v} {disabled} />
+    {/each}
+    <hr>
+
   </div>