reverse the orientation for vertical, add reverse option

- make vertical sliders start with lower value at bottom
- allow to reverse the direction
- this is a breaking change for vertical sliders

resolves #39

Author: simeydotme

README.md

@@ -101,7 +101,7 @@ prop | type | default | description
 **range** | `Boolean`/`String` | `false` | Whether to style as a range picker. Use `range='min'` or `range='max'` for min/max variants
 **pushy** | `Boolean` | `false` | If `range` is `true`, then this boolean decides if one handle will push the other along
 **float** | `Boolean` | `false` | Set true to add a floating label above focussed handles
-**vertical** | `Boolean` | `false` | Make the slider render vertically
+**vertical** | `Boolean` | `false` | Make the slider render vertically (lower value on bottom)
 **pips** | `Boolean` | `false` | Whether to show pips/notches on the slider
 **pipstep** | `Number` | `1`/`10`/`20` | Every `nth` step to show a pip for. This has multiple defaults depending on `values` property
 **first** | `Boolean`/`String` | `false` | Whether to show a pip or label for the first value on slider. Use `first='label'` to show a label value
@@ -110,6 +110,7 @@ prop | type | default | description
 **all** | `Boolean`/`String` | `false` | Whether to show a pip or label for all values. Same as combining `first`, `last` and `rest`. Use `all='label'` to show a label value
 **prefix** | `String` | `""` | A string to prefix to all displayed values
 **suffix** | `String` | `""` | A string to suffix to all displayed values
+**reversed** | `Boolean` | `false` | Reverse the orientation of min/max
 **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

dist/svelte-range-slider-pips.js

@@ -7,6 +7,7 @@
   export let step = 1;
   export let values = [(max + min) / 2];
   export let vertical = false;
+  export let reversed = false;
   export let hoverable = true;
   export let disabled = false;
 
@@ -24,6 +25,7 @@
 
   // stylistic props
   export let focus = undefined;
+  export let orientationStart = undefined;
 
   // methods
   export let percentOf = undefined;
@@ -92,8 +94,9 @@
   :global(.rangePips.vertical .pip) {
     height: 1px;
     width: 0.4em;
-    top: 0;
     left: 0.25em;
+    top: auto;
+    bottom: auto;
   }
   :global(.rangePips .pipVal) {
     position: absolute;
@@ -165,14 +168,15 @@
   class:disabled
   class:hoverable 
   class:vertical 
+  class:reversed 
   class:focus 
 >
   {#if ( all && first !== false ) || first }
     <span
       class="pip first"
       class:selected={isSelected(min)}
       class:in-range={inRange(min)}
-      style="{vertical ? 'top' : 'left'}: 0%;"
+      style="{orientationStart}: 0%;"
       on:click={labelClick(min)}
       on:touchend|preventDefault={labelClick(min)}
     >
@@ -191,7 +195,7 @@
           class="pip"
           class:selected={isSelected(pipVal(i))}
           class:in-range={inRange(pipVal(i))}
-          style="{vertical ? 'top' : 'left'}: {percentOf(pipVal(i))}%;"
+          style="{orientationStart}: {percentOf(pipVal(i))}%;"
           on:click={labelClick(pipVal(i))}
           on:touchend|preventDefault={labelClick(pipVal(i))}
         >
@@ -210,7 +214,7 @@
       class="pip last"
       class:selected={isSelected(max)}
       class:in-range={inRange(max)}
-      style="{vertical ? 'top' : 'left'}: 100%;"
+      style="{orientationStart}: 100%;"
       on:click={labelClick(max)}
       on:touchend|preventDefault={labelClick(max)}
     >

dist/svelte-range-slider-pips.mjs

@@ -12,6 +12,7 @@
   export let values = [(max + min) / 2];
   export let vertical = false;
   export let float = false;
+  export let reversed = false;
   export let hoverable = true;
   export let disabled = false;
 
@@ -142,6 +143,13 @@
     return parseFloat(aligned.toFixed(precision));
   };
 
+  /**
+   * the orientation of the handles/pips based on the
+   * input values of vertical and reversed
+   **/
+  $: orientationStart = vertical ? reversed ? 'top' : 'bottom' : reversed ? 'right' : 'left';
+  $: orientationEnd = vertical ? reversed ? 'bottom' : 'top' : reversed ? 'left' : 'right';
+
   /**
    * helper func to get the index of an element in it's DOM container
    * @param {object} el dom object reference we want the index of
@@ -219,26 +227,27 @@
     // 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;
+      handlePercent = reversed ? handlePercent : 100 - handlePercent;
     } 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;
+      handlePercent = reversed ? 100 - handlePercent : handlePercent;
     }
+    handleVal = ((max - min) / 100) * handlePercent + min;
 
     let closest;
 
     // if we have a range, and the handles are at the same
     // position, we want a simple check if the interaction
     // value is greater than return the second handle
     if (range === true && values[0] === values[1]) {
-      if (hVal > values[1]) {
+      if (handleVal > values[1]) {
         return 1;
       } else {
         return 0;
@@ -248,7 +257,7 @@
       // to the interaction value
     } else {
       closest = values.indexOf(
-        [...values].sort((a, b) => Math.abs(hVal - a) - Math.abs(hVal - b))[0]
+        [...values].sort((a, b) => Math.abs(handleVal - a) - Math.abs(handleVal - b))[0]
       );
     }
     return closest;
@@ -272,12 +281,13 @@
     if (vertical) {
       handlePos = clientPos.clientY - dims.top;
       handlePercent = (handlePos / dims.height) * 100;
-      handleVal = ((max - min) / 100) * handlePercent + min;
+      handlePercent = reversed ? handlePercent : 100 - handlePercent;
     } else {
       handlePos = clientPos.clientX - dims.left;
       handlePercent = (handlePos / dims.width) * 100;
-      handleVal = ((max - min) / 100) * handlePercent + min;
+      handlePercent = reversed ? 100 - handlePercent : handlePercent;
     }
+    handleVal = ((max - min) / 100) * handlePercent + min;
     // move handle to the value
     moveHandle(activeHandle, handleVal);
   }
@@ -616,10 +626,21 @@
     height: 1.4em;
     width: 1.4em;
     top: 0.25em;
-    left: 0.25em;
+    bottom: auto;
     transform: translateY(-50%) translateX(-50%);
     z-index: 2;
   }
+  :global(.rangeSlider.reversed .rangeHandle) {
+    transform: translateY(-50%) translateX(50%);
+  }
+  :global(.rangeSlider.vertical .rangeHandle) {
+    left: 0.25em;
+    top: auto;
+    transform: translateY(50%) translateX(-50%);
+  }
+  :global(.rangeSlider.vertical.reversed .rangeHandle) {
+    transform: translateY(-50%) translateX(-50%);
+  }
   :global(.rangeSlider .rangeNub),
   :global(.rangeSlider .rangeHandle:before) {
     position: absolute;
@@ -629,7 +650,7 @@
     border-radius: 10em;
     height: 100%;
     width: 100%;
-    transition: all 0.2s ease;
+    transition: box-shadow 0.2s ease;
   }
   :global(.rangeSlider .rangeHandle:before) {
     content: "";
@@ -660,10 +681,22 @@
   :global(.rangeSlider.range .rangeHandle:nth-of-type(2) .rangeNub) {
     transform: rotate(45deg);
   }
+  :global(.rangeSlider.range.reversed .rangeHandle:nth-of-type(1) .rangeNub) {
+    transform: rotate(45deg);
+  }
+  :global(.rangeSlider.range.reversed .rangeHandle:nth-of-type(2) .rangeNub) {
+    transform: rotate(-135deg);
+  }
   :global(.rangeSlider.range.vertical .rangeHandle:nth-of-type(1) .rangeNub) {
-    transform: rotate(-45deg);
+    transform: rotate(135deg);
   }
   :global(.rangeSlider.range.vertical .rangeHandle:nth-of-type(2) .rangeNub) {
+    transform: rotate(-45deg);
+  }
+  :global(.rangeSlider.range.vertical.reversed .rangeHandle:nth-of-type(1) .rangeNub) {
+    transform: rotate(-45deg);
+  }
+  :global(.rangeSlider.range.vertical.reversed .rangeHandle:nth-of-type(2) .rangeNub) {
     transform: rotate(135deg);
   }
   :global(.rangeSlider .rangeFloat) {
@@ -753,6 +786,7 @@
   class:disabled
   class:hoverable
   class:vertical
+  class:reversed
   class:focus
   class:min={range === 'min'}
   class:max={range === 'max'}
@@ -773,7 +807,7 @@
       on:blur={sliderBlurHandle}
       on:focus={sliderFocusHandle}
       on:keydown={sliderKeydown}
-      style="{vertical ? 'top' : 'left'}: {$springPositions[index]}%; z-index: {activeHandle === index ? 3 : 2};"
+      style="{orientationStart}: {$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}
@@ -794,8 +828,8 @@
   {#if range}
     <span
       class="rangeBar"
-      style="{vertical ? 'top' : 'left'}: {rangeStart($springPositions)}%; {vertical ? 'bottom' : 'right'}:
-      {rangeEnd($springPositions)}%;" />
+      style="{orientationStart}: {rangeStart($springPositions)}%; 
+             {orientationEnd}: {rangeEnd($springPositions)}%;" />
   {/if}
   {#if pips}
     <RangePips
@@ -805,6 +839,9 @@
       {step}
       {range}
       {vertical}
+      {reversed}
+      {orientationStart}
+      {orientationEnd}
       {hoverable}
       {disabled}
       {all}

src/RangePips.svelte

@@ -12,6 +12,17 @@ body {
 	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
 }
 
+header {
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	padding: 20px;
+	background: rgb(42, 53, 70);
+	color: white;
+	z-index: 6;
+}
+
 a {
 	color: rgb(0,100,200);
 	text-decoration: none;