From 48adf44edf05a138fed94f0083f814f70714ddab Mon Sep 17 00:00:00 2001
From: Mathieu <sollier.mathieu@gmail.com>
Date: Tue, 27 Jul 2021 14:34:39 +0200
Subject: [PATCH] add option to reverse the slider's values

---
 README.md              |  1 +
 src/RangePips.svelte   | 17 +++++++++--------
 src/RangeSlider.svelte | 10 ++++++----
 test/src/App.svelte    |  8 ++++++--
 4 files changed, 22 insertions(+), 14 deletions(-)

diff --git a/README.md b/README.md
index 35891d8..6ac34aa 100644
--- a/README.md
+++ b/README.md
@@ -114,6 +114,7 @@ prop | type | default | description
 **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
 **springValues** | `Object` | `{ stiffness: 0.15, damping: 0.4 }` | Svelte spring physics object to change the behaviour of the handle when moving
+**reversed** | `Boolean` | `false` | Reverse the values ​​of the slider
 
 ### slider events (dispatched)
 
diff --git a/src/RangePips.svelte b/src/RangePips.svelte
index d6d011d..03d6a1e 100644
--- a/src/RangePips.svelte
+++ b/src/RangePips.svelte
@@ -14,6 +14,7 @@
   export let first = undefined;
   export let last = undefined;
   export let rest = undefined;
+  export let reversed = undefined;
 
   // formatting props
   export let prefix = "";
@@ -140,12 +141,12 @@
   {#if ( all && first !== false ) || first }
     <span
       class="pip first"
-      class:selected={isSelected(min)}
-      class:in-range={inRange(min)}
+      class:selected={isSelected(reversed ? max : min)}
+      class:in-range={inRange(reversed ? max : min)}
       style="{vertical ? 'top' : 'left'}: 0%;">
       {#if all === 'label' || first === 'label'}
         <span class="pipVal">
-          {prefix}{formatter(min)}{suffix}
+          {prefix}{formatter(reversed ? max : min)}{suffix}
         </span>
       {/if}
     </span>
@@ -155,12 +156,12 @@
       {#if pipVal(i) !== min && pipVal(i) !== max}
         <span
           class="pip"
-          class:selected={isSelected(pipVal(i))}
+          class:selected={isSelected(reversed ? max - pipVal(i) : pipVal(i))}
           class:in-range={inRange(pipVal(i))}
           style="{vertical ? 'top' : 'left'}: {percentOf(pipVal(i))}%;">
           {#if all === 'label' || rest === 'label'}
             <span class="pipVal">
-              {prefix}{formatter(pipVal(i))}{suffix}
+              {prefix}{formatter(reversed ? max - pipVal(i) : pipVal(i))}{suffix}
             </span>
           {/if}
         </span>
@@ -170,12 +171,12 @@
   {#if ( all && last !== false ) || last}
     <span
       class="pip last"
-      class:selected={isSelected(max)}
-      class:in-range={inRange(max)}
+      class:selected={isSelected(reversed ? min : max)}
+      class:in-range={inRange(reversed ? min : max)}
       style="{vertical ? 'top' : 'left'}: 100%;">
       {#if all === 'label' || last === 'label'}
         <span class="pipVal">
-          {prefix}{formatter(max)}{suffix}
+          {prefix}{formatter(reversed ? min : max)}{suffix}
         </span>
       {/if}
     </span>
diff --git a/src/RangeSlider.svelte b/src/RangeSlider.svelte
index bed48b7..e6dfd78 100644
--- a/src/RangeSlider.svelte
+++ b/src/RangeSlider.svelte
@@ -22,6 +22,7 @@
   export let first = undefined;
   export let last = undefined;
   export let rest = undefined;
+  export let reversed = undefined;
 
   // formatting props
   export let id = undefined;
@@ -302,7 +303,7 @@
 
     // if the value has changed, update it
     if (values[index] !== value) {
-      values[index] = value;
+      values[index] = reversed ? max - value : value;
     }
 
     // fire the change event when the handle moves,
@@ -753,7 +754,7 @@
       on:blur={sliderBlurHandle}
       on:focus={sliderFocusHandle}
       on:keydown={sliderKeydown}
-      style="{vertical ? 'top' : 'left'}: {$springPositions[index]}%; z-index: {activeHandle === index ? 3 : 2};"
+      style="{vertical ? 'top' : 'left'}: {reversed ? 100 - $springPositions[index] : $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}
@@ -772,7 +773,7 @@
   {#if range}
     <span
       class="rangeBar"
-      style="{vertical ? 'top' : 'left'}: {rangeStart($springPositions)}%; {vertical ? 'bottom' : 'right'}:
+      style="{vertical ? 'top' : 'left'}: {reversed ? 100 - rangeStart($springPositions) : rangeStart($springPositions)}%; {vertical ? 'bottom' : 'right'}:
       {rangeEnd($springPositions)}%;" />
   {/if}
   {#if pips}
@@ -793,7 +794,8 @@
       {formatter}
       {focus}
       {disabled}
-      {percentOf} />
+      {percentOf}
+      {reversed} />
   {/if}
 </div>
 
diff --git a/test/src/App.svelte b/test/src/App.svelte
index a905f0b..56fdb74 100644
--- a/test/src/App.svelte
+++ b/test/src/App.svelte
@@ -16,6 +16,7 @@
   const dayFormatCn = v => { if (v === 6) { return "星期日"; }; return "星期" + numzh.format(v + 1); };
   
   let perc1 = [5];
+  let perc1Reversed = [5];
 	let perc2 = [100 - perc1];
   $: perc2max = 100 - perc1[0];
 
@@ -60,7 +61,9 @@
     <RangeSlider vertical range values={[10,30]} pips all="label" {disabled} />
     <RangeSlider vertical range="min" values={[10]} pips all />
     <RangeSlider vertical range="max" values={[30]} pips />
-    
+    <RangeSlider vertical range="min" values={[20]} float pips all="label" />
+    <RangeSlider vertical range="max" values={[20]} float pips all="label" reversed/>
+
     <br>
     <RangeSlider id="test-id" springValues={{ stiffness: 0.03, damping: 0.08 }} />
     <br>
@@ -114,9 +117,10 @@
 
 
     <RangeSlider bind:values={perc1} min={0} max={50} pips all="label" float />
+    <RangeSlider bind:values={perc1Reversed} min={0} max={50} pips all="label" float reversed/>
     <RangeSlider bind:values={perc2} min={0} max={perc2max} pips all="label" float /> 
     <hr>
-    percent1: {perc1}<br>percent2: {perc2} 
+    percent1: {perc1}<br>percent1 reversed: {perc1Reversed} <br>percent2: {perc2} 
 
     <br><br>