add option for "pushy" ranges

- allows selected range handle to "push" the dormant one along if it goes past
the value of the dormant handle

Author: simeydotme

README.md

@@ -87,6 +87,7 @@ prop | type | default | description
 **max** | `Number` | `100` | Maximum value for the slider
 **step** | `Number` | `1` | Every `nth` value to allow handle to stop at
 **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
 **pips** | `Boolean` | `false` | Whether to show pips/notches on the slider

src/RangeSlider.svelte

@@ -4,6 +4,7 @@
 
   // range slider props
   export let range = false;
+  export let pushy = false;
   export let min = 0;
   export let max = 100;
   export let step = 1;
@@ -269,12 +270,22 @@
    * @return {number} the value that was moved to (after alignment/clamping)
    **/
   function moveHandle(index, value) {
+    if (range) {
     // restrict the handles of a range-slider from
-    // going past one-another
-    if (range && index === 0 && value > values[1]) {
+      // going past one-another unless "pushy" is true
+      if (index === 0 && value > values[1]) {
+        if (pushy) {
+          values[1] = value;
+        } else {
       value = values[1];
-    } else if (range && index === 1 && value < values[0]) {
+        }
+      } else if (index === 1 && value < values[0]) {
+        if (pushy) {
+          values[0] = value;
+        } else {
       value = values[0];
+    }
+      }
     }
     // set the value for the handle, and align/clamp it
     values[index] = value;

test/src/App.svelte

@@ -6,6 +6,7 @@
   let day = [3];
   let hue = [244];
   let dynamic = [0,50];
+  let pushy = [30,60]
   const formatter = v => {
     return num.format(v);
   };
@@ -65,7 +66,8 @@
     <RangeSlider float pips first="label" last="label" />
     <RangeSlider float pips first="label" last="label" rest="label" />
     <br>
-    <RangeSlider range values={[35,65]} pips all="label" float />
+    <RangeSlider range bind:values={pushy} float />
+    <RangeSlider range pushy bind:values={pushy} pips all="label" float />
     <RangeSlider range="min" values={[65]} pips all="label" float />
     <RangeSlider range="max" values={[35]} pips all="label" float />
     <br>