refactor the springPositions to fix #20

- move the spring positions in to a reactive statement
- consolidate the percentOf() calls
- remove the error with NaN when min/max is 0 (division error)

related to #15
fixes #20

Author: simeydotme

src/RangeSlider.svelte

@@ -50,21 +50,26 @@
 
   // 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
-  );
-
-  // check the values array, and trim it if needed (range)
-  // and clamp the values to the steps and boundaries set up in the slider
-  $: values = trimRange(values).map((v) => alignValueToStep(v));
-
-  // update the spring function so that movement can happen in the UI
+  let springPositions;
+
   $: {
-    springPositions.set(values.map((v) => percentOf(v)));
-  }
+    // 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)));
+    } else {
+      springPositions = spring( values.map((v) => percentOf(v)), springValues );
+    }
+  };
 
   /**
    * take in a value, and then calculate that value's percentage
@@ -167,7 +172,9 @@
 
   /**
    * trim the values array based on whether the property
-   * for 'range' is 'min', 'max', or truthy.
+   * for 'range' is 'min', 'max', or truthy. This is because we
+   * do not want more than one handle for a min/max range, and we do
+   * not want more than two handles for a true range.
    * @param {array} values the input values for the rangeSlider
    * @return {array} the range array for creating a rangeSlider
    **/

test/src/App.svelte

@@ -1,37 +1,31 @@
 <script>
+
   import RangeSlider from "../../src/RangeSlider.svelte";
-  const num = new Intl.NumberFormat("en-US");
-  const numzh = new Intl.NumberFormat("zh-Hans-CN-u-nu-hanidec");
+
   let values = [21.3, 40, 60, 80];
-  let day = [3];
-  let hue = [244];
   let dynamic = [0,50];
   let pushy = [30,60]
-  const formatter = v => {
-    return num.format(v);
-  };
-  const days = [
-    "Monday",
-    "Tuesday",
-    "Wednesday",
-    "Thursday",
-    "Friday",
-    "Saturday",
-    "Happy Days"
-  ];
-  const dayFormat = v => days[v];
-  const dayFormatCn = v => {
-    if (v === 6) {
-      return "星期日";
-    }
-    return "星期" + numzh.format(v + 1);
-  };
-  $: lightColor = `hsl(${Math.round(hue[0]) - 10}, 65%, 70%)`;
-  $: color = `hsl(${Math.round(hue[0])}, 63%, 54%)`;
 
+  const num = new Intl.NumberFormat("en-US");
+  const numzh = new Intl.NumberFormat("zh-Hans-CN-u-nu-hanidec");
+  const formatter = v => { return num.format(v); };
+
+  let day = [3];
+  const days = [ "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Happy Days" ];
+  const dayFormat = v => days[v];
+  const dayFormatCn = v => { if (v === 6) { return "星期日"; }; return "星期" + numzh.format(v + 1); };
+  
   let perc1 = [5];
 	let perc2 = [100 - perc1];
   $: perc2max = 100 - perc1[0];
+
+  let hue = [244];
+  $: lightColor = `hsl(${Math.round(hue[0]) - 10}, 65%, 70%)`;
+  $: color = `hsl(${Math.round(hue[0])}, 63%, 54%)`;
+
+  let zero = [2,10];
+  let zeromin = 0;
+  let zeromax = 0;
   
 </script>
 
@@ -64,8 +58,11 @@
     <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>
+    <RangeSlider id="test-id" springValues={{ stiffness: 0.03, damping: 0.08 }} />
     <br>
-    <RangeSlider id="test-id" />
+
     <RangeSlider bind:values 
       on:start={(e) => { console.log("start",e.detail)}}
       on:stop={(e) => { console.log("end",e.detail)}} 
@@ -118,6 +115,12 @@
     <hr>
     percent1: {perc1}<br>percent2: {perc2} 
 
+    <br><br>
+
+    <RangeSlider bind:values={zero} bind:min={zeromin} bind:max={zeromax} range float pips all="label" step={1} pipstep={5} />
+    <br><button on:click={()=>{ zeromin = 1; zeromax = 30; zero = 10; }}>increase min/max</button> - {zero}
+    
+
   </div>
 
 

test/yarn.lock

@@ -554,10 +554,10 @@ supports-color@^6.1.0:
   dependencies:
     has-flag "^3.0.0"
 
-svelte@^3.31.2:
-  version "3.31.2"
-  resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.31.2.tgz#d2ddf6cacbb95e4cc3796207510b660a25586324"
-  integrity sha512-TxZGrXzX2ggFH3BIKY5fmbeMdJuZrMIMDYPMX6R9255bueuYIuVaBQSLUeY2oD7W4IdeqRZiAVGCjDw2POKBRA==
+svelte@^3.0.0:
+  version "3.32.1"
+  resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.32.1.tgz#c4b6e35517d0ed77e652cc8964ef660afa2f70f3"
+  integrity sha512-j1KmD2ZOU0RGq1/STDXjwfh0/eJ/Deh2NXyuz1bpR9eOcz9yImn4CGxXdbSAN7cMTm9a7IyPUIbuBCzu/pXK0g==
 
 terser@^4.6.2:
   version "4.8.0"