add the new property 'limits' to the library

- allows setting a limit other than min/max where the handles will stop

Author: simeydotme

dist/range-slider-pips.js

@@ -29,18 +29,12 @@ export let focus;
 export let orientationStart;
 export let moveHandle;
 let clientStart = null;
-$:
-  stepMax = vertical ? 50 : 100;
-$:
-  tooManyPips = (max - min) / step >= stepMax;
-$:
-  stepDivisor = vertical ? 10 : 20;
-$:
-  reducedSteps = (max - min) / stepDivisor;
-$:
-  pipStep = pipstep ?? (tooManyPips ? reducedSteps : 1);
-$:
-  pipCount = Math.floor((max - min) / (step * pipStep));
+$: stepMax = vertical ? 50 : 100;
+$: tooManyPips = (max - min) / step >= stepMax;
+$: stepDivisor = vertical ? 10 : 20;
+$: reducedSteps = (max - min) / stepDivisor;
+$: pipStep = pipstep ?? (tooManyPips ? reducedSteps : 1);
+$: pipCount = Math.floor((max - min) / (step * pipStep));
 function labelDown(event) {
   clientStart = normalisedClient(event);
 }

dist/range-slider-pips.mjs

@@ -2,33 +2,35 @@ import { SvelteComponent } from "svelte";
 import type { Pip, Formatter } from '../types.js';
 declare const __propDef: {
     props: {
-        range?: boolean | "min" | "max" | undefined;
-        min?: number | undefined;
-        max?: number | undefined;
-        step?: number | undefined;
-        value?: number | undefined;
-        values?: number[] | undefined;
-        vertical?: boolean | undefined;
-        reversed?: boolean | undefined;
-        hoverable?: boolean | undefined;
-        disabled?: boolean | undefined;
+        range?: boolean | "min" | "max";
+        min?: number;
+        max?: number;
+        step?: number;
+        value?: number;
+        values?: number[];
+        vertical?: boolean;
+        reversed?: boolean;
+        hoverable?: boolean;
+        disabled?: boolean;
         pipstep?: number | undefined;
         all?: Pip;
         first?: Pip;
         last?: Pip;
         rest?: Pip;
-        prefix?: string | undefined;
-        suffix?: string | undefined;
-        formatter?: Formatter | undefined;
-        precision?: number | undefined;
+        prefix?: string;
+        suffix?: string;
+        formatter?: Formatter;
+        precision?: number;
         focus: boolean;
-        orientationStart: 'left' | 'right' | 'top' | 'bottom';
+        orientationStart: "left" | "right" | "top" | "bottom";
         moveHandle: (index: number | null, value: number) => void;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type RangePipsProps = typeof __propDef.props;
 export type RangePipsEvents = typeof __propDef.events;

dist/svelte/components/RangePips.svelte

@@ -10,6 +10,7 @@
   --handle-border: var(--range-handle-border, var(--handle));
   --range-inactive: var(--range-range-inactive, var(--handle-inactive));
   --range: var(--range-range, var(--handle-focus));
+  --range-limit: var(--range-range-limit, #99a2a280);
   --float-inactive: var(--range-float-inactive, var(--handle-inactive));
   --float: var(--range-float, var(--handle-focus));
   --float-text: var(--range-float-text, white);
@@ -173,7 +174,8 @@
   transform: translate(-50%, -100%);
 }
 
-.rangeSlider .rangeBar {
+.rangeSlider .rangeBar,
+.rangeSlider .rangeLimit {
   position: absolute;
   display: block;
   transition: background 0.2s ease;
@@ -184,7 +186,8 @@
   z-index: 1;
 }
 
-.rangeSlider.vertical .rangeBar {
+.rangeSlider.vertical .rangeBar,
+.rangeSlider.vertical .rangeLimit {
   width: 0.5em;
   height: auto;
 }
@@ -204,6 +207,11 @@
   background-color: var(--range);
 }
 
+.rangeSlider .rangeLimit {
+  background-color: #99a2a280;
+  background-color: var(--range-limit);
+}
+
 .rangeSlider .rangeNub {
   background-color: #99a2a2;
   background-color: var(--handle-inactive);

dist/svelte/components/RangePips.svelte.d.ts

@@ -25,6 +25,7 @@ export let float = false;
 export let reversed = false;
 export let hoverable = true;
 export let disabled = false;
+export let limits = null;
 export let pips = false;
 export let pipstep = void 0;
 export let all = true;
@@ -80,15 +81,12 @@ const checkAriaLabels = () => {
 };
 checkValueIsNumber();
 checkValuesIsArray();
-$:
-  value, updateValues();
-$:
-  values, updateValue();
-$:
-  ariaLabels, checkAriaLabels();
+$: value, updateValues();
+$: values, updateValue();
+$: ariaLabels, checkAriaLabels();
 $: {
   const trimmedAlignedValues = trimRange(
-    values.map((v) => alignValueToStep(v, min, max, step, precision))
+    values.map((v) => alignValueToStep(v, min, max, step, precision, limits))
   );
   if (!(values.length === trimmedAlignedValues.length) || !values.every(
     (element, index) => coerceFloat(element, precision) === trimmedAlignedValues[index]
@@ -105,13 +103,10 @@ $: {
   }
   valueLength = values.length;
 }
-$:
-  orientationStart = vertical ? reversed ? "top" : "bottom" : reversed ? "right" : "left";
-$:
-  orientationEnd = vertical ? reversed ? "bottom" : "top" : reversed ? "left" : "right";
+$: orientationStart = vertical ? reversed ? "top" : "bottom" : reversed ? "right" : "left";
+$: orientationEnd = vertical ? reversed ? "bottom" : "top" : reversed ? "left" : "right";
 function targetIsHandle(el) {
-  if (!slider)
-    return false;
+  if (!slider) return false;
   const handles = slider.querySelectorAll(".handle");
   const isHandle = Array.prototype.includes.call(handles, el);
   const isChild = Array.prototype.some.call(handles, (e) => e.contains(el));
@@ -127,8 +122,7 @@ function trimRange(values2) {
   }
 }
 function getClosestHandle(clientPos) {
-  if (!slider)
-    return 0;
+  if (!slider) return 0;
   const dims = slider.getBoundingClientRect();
   let handlePos = 0;
   let handlePercent = 0;
@@ -158,8 +152,7 @@ function getClosestHandle(clientPos) {
   return closest;
 }
 function handleInteract(clientPos) {
-  if (!slider)
-    return;
+  if (!slider) return;
   const dims = slider.getBoundingClientRect();
   let handlePos = 0;
   let handlePercent = 0;
@@ -177,7 +170,7 @@ function handleInteract(clientPos) {
   moveHandle(activeHandle, handleVal);
 }
 function moveHandle(index, value2) {
-  value2 = alignValueToStep(value2, min, max, step, precision);
+  value2 = alignValueToStep(value2, min, max, step, precision, limits);
   if (index === null) {
     index = activeHandle;
   }
@@ -297,7 +290,8 @@ function sliderInteractStart(event) {
       min,
       max,
       step,
-      precision
+      precision,
+      limits
     );
     eStart();
     if (event.type === "touchstart" && !target.matches(".pipVal")) {
@@ -357,15 +351,15 @@ function eStart() {
   !disabled && dispatch("start", {
     activeHandle,
     value: startValue,
-    values: values.map((v) => alignValueToStep(v, min, max, step, precision))
+    values: values.map((v) => alignValueToStep(v, min, max, step, precision, limits))
   });
 }
 function eStop() {
   !disabled && dispatch("stop", {
     activeHandle,
     startValue,
     value: values[activeHandle],
-    values: values.map((v) => alignValueToStep(v, min, max, step, precision))
+    values: values.map((v) => alignValueToStep(v, min, max, step, precision, limits))
   });
 }
 function eChange() {
@@ -374,7 +368,7 @@ function eChange() {
     startValue,
     previousValue: typeof previousValue === "undefined" ? startValue : previousValue,
     value: values[activeHandle],
-    values: values.map((v) => alignValueToStep(v, min, max, step, precision))
+    values: values.map((v) => alignValueToStep(v, min, max, step, precision, limits))
   });
 }
 function ariaLabelFormatter(value2, index) {
@@ -440,6 +434,13 @@ function ariaLabelFormatter(value2, index) {
       {/if}
     </span>
   {/each}
+  {#if limits}
+    <span
+      class="rangeLimit"
+      style="{orientationStart}: {valueAsPercent(limits[0], min, max, precision)}%;
+             {orientationEnd}: {100 - valueAsPercent(limits[1], min, max, precision)}%;"
+    />
+  {/if}
   {#if range}
     <span
       class="rangeBar"
@@ -497,6 +498,7 @@ function ariaLabelFormatter(value2, index) {
     --handle-border: var(--range-handle-border, var(--handle));
     --range-inactive: var(--range-range-inactive, var(--handle-inactive));
     --range: var(--range-range, var(--handle-focus));
+    --range-limit: var(--range-range-limit, #99a2a280);
     --float-inactive: var(--range-float-inactive, var(--handle-inactive));
     --float: var(--range-float, var(--handle-focus));
     --float-text: var(--range-float-text, white);
@@ -660,7 +662,8 @@ function ariaLabelFormatter(value2, index) {
     transform: translate(-50%, -100%);
   }
 
-  :global(.rangeSlider .rangeBar) {
+  :global(.rangeSlider .rangeBar),
+  :global(.rangeSlider .rangeLimit) {
     position: absolute;
     display: block;
     transition: background 0.2s ease;
@@ -671,7 +674,8 @@ function ariaLabelFormatter(value2, index) {
     z-index: 1;
   }
 
-  :global(.rangeSlider.vertical .rangeBar) {
+  :global(.rangeSlider.vertical .rangeBar),
+  :global(.rangeSlider.vertical .rangeLimit) {
     width: 0.5em;
     height: auto;
   }
@@ -691,6 +695,11 @@ function ariaLabelFormatter(value2, index) {
     background-color: var(--range);
   }
 
+  :global(.rangeSlider .rangeLimit) {
+    background-color: #99a2a280;
+    background-color: var(--range-limit);
+  }
+
   :global(.rangeSlider .rangeNub) {
     background-color: #99a2a2;
     background-color: var(--handle-inactive);

dist/svelte/components/RangeSlider.css

@@ -4,32 +4,33 @@ import type { Pip, Formatter } from '../types.js';
 declare const __propDef: {
     props: {
         slider?: HTMLDivElement | undefined;
-        range?: boolean | "min" | "max" | undefined;
-        pushy?: boolean | undefined;
-        min?: number | undefined;
-        max?: number | undefined;
-        step?: number | undefined;
-        values?: number[] | undefined;
-        value?: number | undefined;
-        vertical?: boolean | undefined;
-        float?: boolean | undefined;
-        reversed?: boolean | undefined;
-        hoverable?: boolean | undefined;
-        disabled?: boolean | undefined;
-        pips?: boolean | undefined;
+        range?: boolean | "min" | "max";
+        pushy?: boolean;
+        min?: number;
+        max?: number;
+        step?: number;
+        values?: number[];
+        value?: number;
+        vertical?: boolean;
+        float?: boolean;
+        reversed?: boolean;
+        hoverable?: boolean;
+        disabled?: boolean;
+        limits?: null | [number, number];
+        pips?: boolean;
         pipstep?: number | undefined;
         all?: Pip;
         first?: Pip;
         last?: Pip;
         rest?: Pip;
         id?: string | undefined;
-        prefix?: string | undefined;
-        suffix?: string | undefined;
-        formatter?: Formatter | undefined;
-        handleFormatter?: Formatter | undefined;
-        ariaLabels?: string[] | undefined;
-        precision?: number | undefined;
-        springValues?: SpringOpts | undefined;
+        prefix?: string;
+        suffix?: string;
+        formatter?: Formatter;
+        handleFormatter?: Formatter;
+        ariaLabels?: string[];
+        precision?: number;
+        springValues?: SpringOpts;
     };
     events: {
         start: CustomEvent<any>;
@@ -39,6 +40,8 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
 };
 export type RangeSliderProps = typeof __propDef.props;
 export type RangeSliderEvents = typeof __propDef.events;

dist/svelte/components/RangeSlider.svelte

@@ -35,7 +35,7 @@ export declare const valueAsPercent: (value: number, min: number, max: number, p
  * @param {number} precision the number of decimal places to fix to
  * @return {number} the value after it's been aligned
  **/
-export declare const alignValueToStep: (value: number, min: number, max: number, step: number, precision?: number) => number;
+export declare const alignValueToStep: (value: number, min: number, max: number, step: number, precision?: number, limits?: [number, number] | null) => number;
 /**
  * helper to take a string of html and return only the text
  * @param {string} possibleHtml the string that may contain html

dist/svelte/components/RangeSlider.svelte.d.ts

@@ -50,17 +50,10 @@ export const valueAsPercent = function (value, min, max, precision = 2) {
  * @param {number} precision the number of decimal places to fix to
  * @return {number} the value after it's been aligned
  **/
-export const alignValueToStep = function (value, min, max, step, precision = 2) {
-    // sanity check for performance
-    if (value <= min) {
-        return coerceFloat(min, precision);
-    }
-    else if (value >= max) {
-        return coerceFloat(max, precision);
-    }
-    else {
-        value = coerceFloat(value, precision);
-    }
+export const alignValueToStep = function (value, min, max, step, precision = 2, limits = null) {
+    // if limits are provided, clamp the value between the limits
+    // if no limits are provided, clamp the value between the min and max
+    value = clampValue(value, limits?.[0] ?? min, limits?.[1] ?? max);
     // find the middle-point between steps
     // and see if the value is closer to the
     // next step, or previous step
@@ -70,7 +63,7 @@ export const alignValueToStep = function (value, min, max, step, precision = 2)
         aligned += remainder > 0 ? step : -step;
     }
     // make sure the value is within acceptable limits
-    aligned = clampValue(aligned, min, max);
+    aligned = clampValue(aligned, limits?.[0] ?? min, limits?.[1] ?? max);
     // make sure the returned value is set to the precision desired
     // this is also because javascript often returns weird floats
     // when dealing with odd numbers and percentages