add percent to the formatter functions

this allows some ability to add ramping (easing) to the slider if
provided as a easing function in the formatter (see test folder changes)

Author: simeydotme

README.md

@@ -113,8 +113,8 @@ prop | type | default | description
 **hoverable** | `Boolean` | `true` | Whether hover styles are enabled for both handles and pips/values
 **disabled** | `Boolean` | `false` | Determine if the slider is disabled, or enabled _(only disables interactions, and events)_
 **id** | `String` | `""` | Give the slider a unique ID for use in styling
-**formatter** | `Function` | `(v,i) => v` | A function to re-format values before they are displayed (`v = value, i = pip index`)
-**handleFormatter** | `Function` | `formatter` | A function to re-format values on the handle/float before they are displayed. Defaults to the same function given to the `formatter` property (`v = value, i = handle index`)
+**formatter** | `Function` | `(v,i,p) => v` | A function to re-format values before they are displayed (`v = value, i = pip index, p = percent`)
+**handleFormatter** | `Function` | `formatter` | A function to re-format values on the handle/float before they are displayed. Defaults to the same function given to the `formatter` property (`v = value, i = handle index, p = percent`)
 **springValues** | `Object` | `{ stiffness: 0.15, damping: 0.4 }` | Svelte spring physics object to change the behaviour of the handle when moving
 
 ### slider events (dispatched)

dist/svelte-range-slider-pips.js

@@ -1,6 +1,6 @@
 {
   "name": "svelte-range-slider-pips",
-  "version": "1.8.1",
+  "version": "2.0.0",
   "svelte": "src/index.js",
   "module": "dist/svelte-range-slider-pips.mjs",
   "main": "dist/svelte-range-slider-pips.js",

dist/svelte-range-slider-pips.mjs

@@ -178,7 +178,7 @@
     >
       {#if all === 'label' || first === 'label'}
         <span class="pipVal">
-          {#if prefix}<span class="pipVal-prefix">{prefix}</span>{/if}{formatter(min,0)}{#if suffix}<span class="pipVal-suffix">{suffix}</span>{/if}
+          {#if prefix}<span class="pipVal-prefix">{prefix}</span>{/if}{formatter(min,0,0)}{#if suffix}<span class="pipVal-suffix">{suffix}</span>{/if}
         </span>
       {/if}
     </span>
@@ -197,7 +197,7 @@
         >
           {#if all === 'label' || rest === 'label'}
             <span class="pipVal">
-              {#if prefix}<span class="pipVal-prefix">{prefix}</span>{/if}{formatter(pipVal(i),i)}{#if suffix}<span class="pipVal-suffix">{suffix}</span>{/if}
+              {#if prefix}<span class="pipVal-prefix">{prefix}</span>{/if}{formatter(pipVal(i),i,percentOf(pipVal(i)))}{#if suffix}<span class="pipVal-suffix">{suffix}</span>{/if}
             </span>
           {/if}
         </span>
@@ -216,7 +216,7 @@
     >
       {#if all === 'label' || last === 'label'}
         <span class="pipVal">
-          {#if prefix}<span class="pipVal-prefix">{prefix}</span>{/if}{formatter(max,pipCount)}{#if suffix}<span class="pipVal-suffix">{suffix}</span>{/if}
+          {#if prefix}<span class="pipVal-prefix">{prefix}</span>{/if}{formatter(max,pipCount,100)}{#if suffix}<span class="pipVal-suffix">{suffix}</span>{/if}
         </span>
       {/if}
     </span>

package.json

@@ -27,7 +27,7 @@
   export let id = undefined;
   export let prefix = "";
   export let suffix = "";
-  export let formatter = (v,i) => v;
+  export let formatter = (v,i,p) => v;
   export let handleFormatter = formatter;
 
   // stylistic props
@@ -266,20 +266,20 @@
     // of the slider, as it may have changed size
     const dims = getSliderDimensions();
     // calculate the interaction position, percent and value
-    let hPos = 0;
-    let hPercent = 0;
-    let hVal = 0;
+    let handlePos = 0;
+    let handlePercent = 0;
+    let handleVal = 0;
     if (vertical) {
-      hPos = clientPos.clientY - dims.top;
-      hPercent = (hPos / dims.height) * 100;
-      hVal = ((max - min) / 100) * hPercent + min;
+      handlePos = clientPos.clientY - dims.top;
+      handlePercent = (handlePos / dims.height) * 100;
+      handleVal = ((max - min) / 100) * handlePercent + min;
     } else {
-      hPos = clientPos.clientX - dims.left;
-      hPercent = (hPos / dims.width) * 100;
-      hVal = ((max - min) / 100) * hPercent + min;
+      handlePos = clientPos.clientX - dims.left;
+      handlePercent = (handlePos / dims.width) * 100;
+      handleVal = ((max - min) / 100) * handlePercent + min;
     }
     // move handle to the value
-    moveHandle(activeHandle, hVal);
+    moveHandle(activeHandle, handleVal);
   }
 
   /**
@@ -777,7 +777,7 @@
       aria-valuemin={range === true && index === 1 ? values[0] : min}
       aria-valuemax={range === true && index === 0 ? values[1] : max}
       aria-valuenow={value}
-      aria-valuetext="{prefix}{handleFormatter(value,index)}{suffix}"
+      aria-valuetext="{prefix}{handleFormatter(value,index,percentOf(value))}{suffix}"
       aria-orientation={vertical ? 'vertical' : 'horizontal'}
       aria-disabled={disabled}
       {disabled}
@@ -786,7 +786,7 @@
       <span class="rangeNub" />
       {#if float}
         <span class="rangeFloat">
-          {#if prefix}<span class="rangeFloat-prefix">{prefix}</span>{/if}{handleFormatter(value,index)}{#if suffix}<span class="rangeFloat-suffix">{suffix}</span>{/if}
+          {#if prefix}<span class="rangeFloat-prefix">{prefix}</span>{/if}{handleFormatter(value,index,percentOf(value))}{#if suffix}<span class="rangeFloat-suffix">{suffix}</span>{/if}
         </span>
       {/if}
     </span>
@@ -817,7 +817,7 @@
       {formatter}
       {focus}
       {percentOf}
-      {moveHandle} 
+      {moveHandle}
     />
   {/if}
 </div>

src/RangePips.svelte

@@ -64,3 +64,12 @@ button:not(:disabled):active {
 button:focus {
 	border-color: #666;
 }
+
+table {
+	margin: 10px;
+	width: 100%;
+}
+
+td, th {
+	padding: 5px;
+}

src/RangeSlider.svelte

@@ -19,6 +19,10 @@
 	let perc2 = [100 - perc1];
   $: perc2max = 100 - perc1[0];
 
+  let big = [500,1000];
+  let hramp = ( v,i,p ) => { return ((v) * (((p/100)*(p/100)) )).toFixed(0) + " (" + p + "%)"; };
+  let ramp = ( v,i,p ) => { return ((v) * (((p/100)*(p/100)) )).toFixed(0); };
+
   let hue = [244];
   $: lightColor = `hsl(${Math.round(hue[0]) - 10}, 65%, 70%)`;
   $: color = `hsl(${Math.round(hue[0])}, 63%, 54%)`;
@@ -140,10 +144,25 @@
 
     <RangeSlider bind:values={perc1} min={0} max={50} pips all="label" float />
     <RangeSlider bind:values={perc2} min={0} max={perc2max} pips all="label" float /> 
-    <hr>
-    percent1: {perc1}<br>percent2: {perc2} 
+    <hr> {perc1} / {perc2} 
 
-    <br><br>
+    <br>
+    
+    <h2>BIG, ramped value</h2>
+    <RangeSlider bind:values={big} min={0} max={10000} pips first="label" last="label" float formatter={ramp} handleFormatter={hramp} />
+    <table>
+      <tr>
+        <th>real value</th><th>formatted (ramp(v,i,p))</th>
+      </tr>
+      <tr>
+        <td>{big}</td><td>{[ ramp(big[0],0,parseFloat((big[0] / 10000 * 100).toFixed(1))), ramp(big[1],0,parseFloat((big[1] / 10000 * 100).toFixed(1))) ]}</td>
+      </tr>
+      <tr>
+        <td colspan=2>{[ parseInt((big[0] / 10000 * 100).toFixed(1)) + "%", parseInt((big[1] / 10000 * 100).toFixed(1)) + "%" ]}</td>
+      </tr>
+    </table>
+    
+    <br>
 
     <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}