normalise floating point values for pips/values/selected

- resolves #58
- also fixes another few small bugs with tiny floating points

Author: simeydotme

src/RangePips.svelte

@@ -30,17 +30,18 @@
   // methods
   export let percentOf = undefined;
   export let moveHandle = undefined;
+  export let fixFloat = undefined;
 
   $: pipStep = pipstep || ((max - min) / step >= ( vertical ? 50 : 100 ) ? (max - min) / ( vertical ? 10 : 20 ) : 1);
 
   $: pipCount = parseInt((max - min) / (step * pipStep), 10);
 
   $: pipVal = function(val) {
-    return min + val * step * pipStep;
+    return fixFloat( min + val * step * pipStep );
   };
 
   $: isSelected = function(val) {
-    return values.some(v => v === val);
+    return values.some(v => fixFloat(v) === fixFloat(val));
   };
 
   $: inRange = function(val) {
@@ -182,7 +183,7 @@
     >
       {#if all === 'label' || first === 'label'}
         <span class="pipVal">
-          {#if prefix}<span class="pipVal-prefix">{prefix}</span>{/if}{formatter(min,0,0)}{#if suffix}<span class="pipVal-suffix">{suffix}</span>{/if}
+          {#if prefix}<span class="pipVal-prefix">{prefix}</span>{/if}{formatter(fixFloat(min),0,0)}{#if suffix}<span class="pipVal-suffix">{suffix}</span>{/if}
         </span>
       {/if}
     </span>
@@ -220,7 +221,7 @@
     >
       {#if all === 'label' || last === 'label'}
         <span class="pipVal">
-          {#if prefix}<span class="pipVal-prefix">{prefix}</span>{/if}{formatter(max,pipCount,100)}{#if suffix}<span class="pipVal-suffix">{suffix}</span>{/if}
+          {#if prefix}<span class="pipVal-prefix">{prefix}</span>{/if}{formatter(fixFloat(max),pipCount,100)}{#if suffix}<span class="pipVal-suffix">{suffix}</span>{/if}
         </span>
       {/if}
     </span>

src/RangeSlider.svelte

@@ -56,6 +56,8 @@
 
   let springPositions;
 
+  const fixFloat = (v) => parseFloat(v.toFixed(precision));
+
   $: {
 
     // check that "values" is an array, or set it as array
@@ -97,7 +99,7 @@
     } else if (perc >= 100) {
       return 100;
     } else {
-      return parseFloat(perc.toFixed(precision));
+      return fixFloat(perc);
     }
   };
 
@@ -121,11 +123,10 @@
   $: alignValueToStep = function (val) {
     // sanity check for performance
     if (val <= min) {
-      return min;
+      return fixFloat(min);
     } else if (val >= max) {
-      return max;
+      return fixFloat(max);
     }
-
     // find the middle-point between steps
     // and see if the value is closer to the
     // next step, or previous step
@@ -139,8 +140,7 @@
     // make sure the returned value is set to the precision desired
     // this is also because javascript often returns weird floats
     // when dealing with odd numbers and percentages
-
-    return parseFloat(aligned.toFixed(precision));
+    return fixFloat(aligned);
   };
 
   /**
@@ -854,6 +854,7 @@
       {focus}
       {percentOf}
       {moveHandle}
+      {fixFloat}
     />
   {/if}
 </div>

test/src/App.svelte

@@ -56,6 +56,9 @@
       boundSlider.style.outlineOffset = "15px";
     },500);
   });
+
+  let decimals = [0.003, 0.123];
+  let decimals2 = [-0.133, 0.444444444];
   
 </script>
 
@@ -157,6 +160,7 @@
     <br>
     <RangeSlider float pips step={10} pipstep={1} {reversed} {hoverable} {disabled} />
     <RangeSlider float pips step={10} pipstep={2} {reversed} {hoverable} {disabled} />
+    <RangeSlider float pips step={10} pipstep={0.25} {reversed} {hoverable} {disabled} />
     <RangeSlider float pips step={0.1} min={dynamic[0]} max={dynamic[1]} 
       on:start={(e) => { console.log("start",e.detail)}}
       on:stop={(e) => { console.log("stop",e.detail)}} 
@@ -223,6 +227,13 @@
     {/each}
     <hr>
 
+    <h2>Decimal / Float Values</h2>
+    <RangeSlider bind:values={decimals} float pips all="label" min={-0.01} max={0.01} step={0.0005} precision={3} {reversed} {hoverable} {disabled} />
+    {decimals}<br>
+    
+    <RangeSlider bind:values={decimals2} float pips all="label" min={-0.01} max={0.01} step={0.0005} precision={5} {reversed} {hoverable} {disabled} />
+    {decimals2}<br>
+
   </div>