Squashed commit of the following:

commit 933c6b339604a7cf1ac9d45bd37c2cbdc5cee035 Author: simeydotme <simey.me@gmail.com> Date: Sat Jul 24 18:30:03 2021 +0800 Add second argument for formatter functions resolves #23 I modifed the arguments for the formatter functions, they both now accept the original `(v)` value which means it should be backwards compatible. But there is also an additional `(i)` argument which holds the index of the handle/pip respectively depending if formatting a handle or a pip. commit c9437a0a479521bc27fa9fd388ffe64830476eb6 Author: simeydotme <simey.me@gmail.com> Date: Sat Jul 24 17:33:57 2021 +0800 Add styling wrappers for `prefix` and `suffix` resolves #27 This commit adds a `<span>` wrapper around each prefix and suffix, allowing finer control over the aesthetics of the pips, and floats.
simeydotme · Jul 24, 2021 · 556c4b8 · 556c4b8
1 parent 23f5b9d
commit 556c4b8
Show file tree

Hide file tree

Showing 6 changed files with 73 additions and 36 deletions.
diff --git a/README.md b/README.md
@@ -111,8 +111,8 @@ prop | type | default | description
 **prefix** | `String` | `""` | A string to prefix to all displayed values
 **suffix** | `String` | `""` | A string to suffix to all displayed values
 **disabled** | `Boolean` | `false` | Determine if the slider is disabled, or enabled _(only disables interactions, and events)_
-**formatter** | `Function` | `(v) => v` | A function to re-format values before they are displayed
-**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
+**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`)
 **springValues** | `Object` | `{ stiffness: 0.15, damping: 0.4 }` | Svelte spring physics object to change the behaviour of the handle when moving
 
 ### slider events (dispatched)

diff --git a/src/RangePips.svelte b/src/RangePips.svelte
@@ -18,7 +18,7 @@
   // formatting props
   export let prefix = "";
   export let suffix = "";
-  export let formatter = v => v;
+  export let formatter = (v,i) => v;
 
   // stylistic props
   export let focus = undefined;
@@ -145,7 +145,7 @@
       style="{vertical ? 'top' : 'left'}: 0%;">
       {#if all === 'label' || first === 'label'}
         <span class="pipVal">
-          {prefix}{formatter(min)}{suffix}
+          {#if prefix}<span class="pipVal-prefix">{prefix}</span>{/if}{formatter(min,0)}{#if suffix}<span class="pipVal-suffix">{suffix}</span>{/if}
         </span>
       {/if}
     </span>
@@ -160,7 +160,7 @@
           style="{vertical ? 'top' : 'left'}: {percentOf(pipVal(i))}%;">
           {#if all === 'label' || rest === 'label'}
             <span class="pipVal">
-              {prefix}{formatter(pipVal(i))}{suffix}
+              {#if prefix}<span class="pipVal-prefix">{prefix}</span>{/if}{formatter(pipVal(i),i)}{#if suffix}<span class="pipVal-suffix">{suffix}</span>{/if}
             </span>
           {/if}
         </span>
@@ -175,7 +175,7 @@
       style="{vertical ? 'top' : 'left'}: 100%;">
       {#if all === 'label' || last === 'label'}
         <span class="pipVal">
-          {prefix}{formatter(max)}{suffix}
+          {#if prefix}<span class="pipVal-prefix">{prefix}</span>{/if}{formatter(max,pipCount)}{#if suffix}<span class="pipVal-suffix">{suffix}</span>{/if}
         </span>
       {/if}
     </span>

diff --git a/src/RangeSlider.svelte b/src/RangeSlider.svelte
@@ -27,7 +27,7 @@
   export let id = undefined;
   export let prefix = "";
   export let suffix = "";
-  export let formatter = (v) => v;
+  export let formatter = (v,i) => v;
   export let handleFormatter = formatter;
 
   // stylistic props
@@ -750,22 +750,25 @@
       class:hoverable={hover && !disabled}
       class:active={focus && activeHandle === index}
       class:press={handlePressed && activeHandle === index}
+      data-handle={index}
       on:blur={sliderBlurHandle}
       on:focus={sliderFocusHandle}
       on:keydown={sliderKeydown}
       style="{vertical ? 'top' : 'left'}: {$springPositions[index]}%; z-index: {activeHandle === index ? 3 : 2};"
       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)}{suffix}"
+      aria-valuetext="{prefix}{handleFormatter(value,index)}{suffix}"
       aria-orientation={vertical ? 'vertical' : 'horizontal'}
       aria-disabled={disabled}
       {disabled}
       tabindex="{ disabled ? -1 : 0 }"
     >
       <span class="rangeNub" />
       {#if float}
-        <span class="rangeFloat">{prefix}{handleFormatter(value)}{suffix}</span>
+        <span class="rangeFloat">
+          {#if prefix}<span class="rangeFloat-prefix">{prefix}</span>{/if}{handleFormatter(value,index)}{#if suffix}<span class="rangeFloat-suffix">{suffix}</span>{/if}
+        </span>
       {/if}
     </span>
   {/each}

diff --git a/test/public/index.html b/test/public/index.html
@@ -8,6 +8,7 @@
 
 	<link rel='icon' type='image/png' href='/favicon.png'>
 	<link rel='stylesheet' href='/global.css'>
+	<link rel='stylesheet' href='/testing.css'>
 	<link rel='stylesheet' href='/build/bundle.css'>
 
 	<script defer src='/build/bundle.js'></script>

diff --git a/test/public/testing.css b/test/public/testing.css
@@ -0,0 +1,39 @@
+
+
+body,html {
+    padding: 0;
+    margin: 0;
+}
+main {
+    font-family: sans-serif;
+    text-align: center;
+    padding: 15px;
+}
+@media screen and ( min-width: 600px ) {
+    main {
+        padding: 50px;
+    }
+}
+input {
+    width: 100px;
+}
+
+.rangeSlider.rangeSlider {
+    margin: 60px;
+}
+
+h2,h3,h4 {
+    margin: 20px 0 10px;
+}
+
+h2 + .rangeSlider.rangeSlider, h3 + .rangeSlider.rangeSlider, h4 + .rangeSlider.rangeSlider {
+    margin-top: 10px;
+}
+
+.pipVal-prefix {
+    color: coral;
+}
+
+.pipVal-suffix {
+    color: blueviolet;
+}
diff --git a/test/src/App.svelte b/test/src/App.svelte
@@ -39,6 +39,12 @@
     --range-handle-inactive: var(--range-slider);
     --range-handle-focus: rgb(245, 0, 46);
   }
+  #test-id [data-handle="1"] {
+    --handle: turquoise;
+    --handle-inactive: #a0ffe0;
+    --handle-border: #a0ffe0;
+    --handle-focus: var(--handle);
+  }
   #clr-test {
     --range-slider: rgb(195, 228, 222);
     --range-handle-inactive: rgb(81, 185, 180);
@@ -62,7 +68,8 @@
     <RangeSlider vertical range="max" values={[30]} pips />
 
     <br>
-    <RangeSlider id="test-id" springValues={{ stiffness: 0.03, damping: 0.08 }} />
+    <h2>Spring & Colors Test</h2>
+    <RangeSlider id="test-id" springValues={{ stiffness: 0.03, damping: 0.08 }} values={[30,50,70]} />
     <br>
 
     <RangeSlider bind:values {disabled} 
@@ -87,9 +94,14 @@
       on:change={(e) => { console.log("change",e.detail)}} 
     />
     <br>
+    <h2>range</h2>
+    <h3>Handles block each other</h3>
     <RangeSlider range bind:values={pushy} float />
+    <h3>Handles push each other</h3>
     <RangeSlider range pushy bind:values={pushy} pips all="label" float />
+    <h2>min range</h2>
     <RangeSlider range="min" values={[65]} pips all="label" float />
+    <h2>max range</h2>
     <RangeSlider range="max" values={[35]} pips all="label" float />
     <br>
     <RangeSlider float pips step={10} pipstep={1} />
@@ -101,9 +113,14 @@
     />
     <br>
     <RangeSlider float pips first="label" last="label" rest pipstep={1} bind:values={dynamic} range />
+
+    <h2>Prefix</h2>
     <RangeSlider prefix="$" range values={[20,80]} float pips first="label" last="label" />
-    <RangeSlider id="clr-test" prefix="~" suffix="m²" {formatter} range values={[100,3000]} min={100} max={3000} step={50} float pips first="label" last="label" />
-    <RangeSlider handleFormatter={()=>"O²"} formatter={(v)=>`${v}% O²`} step={1} float pips first="label" last="label" hover={false} />
+    <h2>Prefix & Suffix, color</h2>
+    <RangeSlider id="clr-test" prefix="~" suffix="m²" {formatter} range values={[100,3000]} min={100} max={3000} step={200} float pips all="label" />
+    <h2>Formatters</h2>
+    <RangeSlider handleFormatter={(v,i)=>"O²"} formatter={(v,i)=>`${v}% O²`} step={1} float pips first="label" last="label" hover={false} values={[25,50,75]} />
+    <RangeSlider handleFormatter={(v,i)=>`v: ${v}, i: ${i}`} formatter={(v,i)=>`v: ${v}, i: ${i}`} step={10} float pips all="label" values={[25,50,75]} />
     <br>
     <RangeSlider bind:values={day} min={0} max={6} formatter={dayFormat} float pips first="label" last="label" rest="label" />
     <RangeSlider bind:values={day} min={0} max={6} formatter={dayFormatCn} float pips first="label" last="label" rest="label" />
@@ -121,7 +138,7 @@
     <br><br>
 
     <RangeSlider bind:values={zero} min={zeromin} 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} 
+    <br><button on:click={()=>{ zeromin = 10; zeromax = 30; zero = [3,70]; }}>increase min/max</button> - {zero} 
 
     <RangeSlider bind:values  float pips all="label" {disabled} />
     <button on:click={()=>{disabled=!disabled}}>toggle disabled</button>
@@ -130,26 +147,3 @@
 
 
 </main>
-
-<style>
-  :global(body,html) {
-    padding: 0;
-    margin: 0;
-  }
-  main {
-    font-family: sans-serif;
-    text-align: center;
-    padding: 15px;
-  }
-  @media screen and ( min-width: 600px ) {
-    main {
-      padding: 50px;
-    }
-  }
-  input {
-    width: 100px;
-  }
-  :global(.rangeSlider ) {
-    margin: 60px!important;
-  }
-</style>