add some unique styling for pips outside of limits

Author: simeydotme

dist/range-slider-pips.js

@@ -4,7 +4,8 @@
   normalisedClient,
   isInRange,
   isSelected,
-  getValueFromIndex
+  getValueFromIndex,
+  isOutOfLimit
 } from "../utils.js";
 export let range = false;
 export let min = 0;
@@ -16,6 +17,7 @@ export let vertical = false;
 export let reversed = false;
 export let hoverable = true;
 export let disabled = false;
+export let limits = null;
 export let pipstep = void 0;
 export let all = true;
 export let first = void 0;
@@ -64,6 +66,7 @@ function labelUp(pipValue, event) {
       class="pip first"
       class:selected={isSelected(min, values, precision)}
       class:in-range={isInRange(min, values, range)}
+      class:out-of-limit={isOutOfLimit(min, limits)}
       style="{orientationStart}: 0%;"
       data-val={coerceFloat(min, precision)}
       on:pointerdown={(e) => {
@@ -91,6 +94,7 @@ function labelUp(pipValue, event) {
           class="pip"
           class:selected={isSelected(val, values, precision)}
           class:in-range={isInRange(val, values, range)}
+          class:out-of-limit={isOutOfLimit(val, limits)}
           style="{orientationStart}: {valueAsPercent(val, min, max, precision)}%;"
           data-val={val}
           on:pointerdown={(e) => {
@@ -117,6 +121,7 @@ function labelUp(pipValue, event) {
       class="pip last"
       class:selected={isSelected(max, values, precision)}
       class:in-range={isInRange(max, values, range)}
+      class:out-of-limit={isOutOfLimit(max, limits)}
       style="{orientationStart}: 100%;"
       data-val={coerceFloat(max, precision)}
       on:pointerdown={(e) => {
@@ -151,6 +156,8 @@ function labelUp(pipValue, event) {
     --pip-hover-text: var(--range-pip-hover-text, var(--pip-hover));
     --pip-in-range: var(--range-pip-in-range, var(--pip-active));
     --pip-in-range-text: var(--range-pip-in-range-text, var(--pip-active-text));
+    --pip-out-of-range: var(--range-pip-out-of-range, #aebecf);
+    --pip-out-of-range-text: var(--range-pip-out-of-range-text, var(--pip-out-of-range));
   }
 
   :global(.rangePips) {
@@ -225,7 +232,7 @@ function labelUp(pipValue, event) {
     background-color: var(--pip-active);
   }
 
-  :global(.rangePips.hoverable:not(.disabled) .pip:hover) {
+  :global(.rangePips.hoverable:not(.disabled) .pip:not(.out-of-limit):hover) {
     color: darkslategrey;
     color: var(--pip-hover-text);
     background-color: darkslategrey;
@@ -239,6 +246,13 @@ function labelUp(pipValue, event) {
     background-color: var(--pip-in-range);
   }
 
+  :global(.rangePips .pip.out-of-limit) {
+    color: #aebecf;
+    color: var(--pip-out-of-range-text);
+    background-color: #aebecf;
+    background-color: var(--pip-out-of-range);
+  }
+
   :global(.rangePips .pip.selected) {
     height: 0.75em;
   }
@@ -258,11 +272,13 @@ function labelUp(pipValue, event) {
     left: 0.75em;
   }
 
-  :global(.rangePips.hoverable:not(.disabled) .pip:not(.selected):hover) {
+  :global(.rangePips.hoverable:not(.disabled) .pip:not(.selected):not(.out-of-limit):hover) {
     transition: none;
   }
 
-  :global(.rangePips.hoverable:not(.disabled) .pip:not(.selected):hover .pipVal) {
+  :global(
+      .rangePips.hoverable:not(.disabled) .pip:not(.selected):not(.out-of-limit):hover .pipVal
+    ) {
     transition: none;
     font-weight: bold;
   }

dist/range-slider-pips.mjs

@@ -12,6 +12,7 @@ declare const __propDef: {
         reversed?: boolean | undefined;
         hoverable?: boolean | undefined;
         disabled?: boolean | undefined;
+        limits?: [number, number] | null | undefined;
         pipstep?: number | undefined;
         all?: Pip;
         first?: Pip;

dist/svelte/components/RangePips.svelte

@@ -468,6 +468,7 @@ function ariaLabelFormatter(value2, index) {
       {orientationStart}
       {hoverable}
       {disabled}
+      {limits}
       {all}
       {first}
       {last}

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

@@ -63,6 +63,7 @@ export declare const elementIndex: (el: Element | null) => number;
  * @returns {boolean} true if the value is in the range
  */
 export declare const isInRange: (value: number, range: number[], type: string | boolean) => boolean | undefined;
+export declare const isOutOfLimit: (value: number, limits: number[] | null) => boolean;
 /**
  * helper to check if the given value is selected
  * @param value the value to check if is selected

dist/svelte/components/RangeSlider.svelte

@@ -122,6 +122,11 @@ export const isInRange = (value, range, type) => {
         return range[0] < value && range[1] > value;
     }
 };
+export const isOutOfLimit = (value, limits) => {
+    if (!limits)
+        return false;
+    return value < limits[0] || value > limits[1];
+};
 /**
  * helper to check if the given value is selected
  * @param value the value to check if is selected

dist/svelte/utils.d.ts

@@ -1,6 +1,6 @@
 {
   "name": "svelte-range-slider-pips",
-  "version": "3.2.0",
+  "version": "3.2.1",
   "description": "Multi-Thumb, Accessible, Beautiful Range Slider with Pips",
   "repository": {
     "type": "git",

dist/svelte/utils.js

@@ -5,7 +5,8 @@
     normalisedClient,
     isInRange,
     isSelected,
-    getValueFromIndex
+    getValueFromIndex,
+    isOutOfLimit
   } from '$lib/utils.js';
   import type { Pip, Formatter, NormalisedClient } from '$lib/types.js';
 
@@ -20,6 +21,7 @@
   export let reversed: boolean = false;
   export let hoverable: boolean = true;
   export let disabled: boolean = false;
+  export let limits: null | [number, number] = null;
 
   // range pips / values props
   export let pipstep: number | undefined = undefined;
@@ -86,6 +88,7 @@
       class="pip first"
       class:selected={isSelected(min, values, precision)}
       class:in-range={isInRange(min, values, range)}
+      class:out-of-limit={isOutOfLimit(min, limits)}
       style="{orientationStart}: 0%;"
       data-val={coerceFloat(min, precision)}
       on:pointerdown={(e) => {
@@ -113,6 +116,7 @@
           class="pip"
           class:selected={isSelected(val, values, precision)}
           class:in-range={isInRange(val, values, range)}
+          class:out-of-limit={isOutOfLimit(val, limits)}
           style="{orientationStart}: {valueAsPercent(val, min, max, precision)}%;"
           data-val={val}
           on:pointerdown={(e) => {
@@ -139,6 +143,7 @@
       class="pip last"
       class:selected={isSelected(max, values, precision)}
       class:in-range={isInRange(max, values, range)}
+      class:out-of-limit={isOutOfLimit(max, limits)}
       style="{orientationStart}: 100%;"
       data-val={coerceFloat(max, precision)}
       on:pointerdown={(e) => {
@@ -173,6 +178,8 @@
     --pip-hover-text: var(--range-pip-hover-text, var(--pip-hover));
     --pip-in-range: var(--range-pip-in-range, var(--pip-active));
     --pip-in-range-text: var(--range-pip-in-range-text, var(--pip-active-text));
+    --pip-out-of-range: var(--range-pip-out-of-range, #aebecf);
+    --pip-out-of-range-text: var(--range-pip-out-of-range-text, var(--pip-out-of-range));
   }
 
   :global(.rangePips) {
@@ -247,7 +254,7 @@
     background-color: var(--pip-active);
   }
 
-  :global(.rangePips.hoverable:not(.disabled) .pip:hover) {
+  :global(.rangePips.hoverable:not(.disabled) .pip:not(.out-of-limit):hover) {
     color: darkslategrey;
     color: var(--pip-hover-text);
     background-color: darkslategrey;
@@ -261,6 +268,13 @@
     background-color: var(--pip-in-range);
   }
 
+  :global(.rangePips .pip.out-of-limit) {
+    color: #aebecf;
+    color: var(--pip-out-of-range-text);
+    background-color: #aebecf;
+    background-color: var(--pip-out-of-range);
+  }
+
   :global(.rangePips .pip.selected) {
     height: 0.75em;
   }
@@ -280,11 +294,13 @@
     left: 0.75em;
   }
 
-  :global(.rangePips.hoverable:not(.disabled) .pip:not(.selected):hover) {
+  :global(.rangePips.hoverable:not(.disabled) .pip:not(.selected):not(.out-of-limit):hover) {
     transition: none;
   }
 
-  :global(.rangePips.hoverable:not(.disabled) .pip:not(.selected):hover .pipVal) {
+  :global(
+      .rangePips.hoverable:not(.disabled) .pip:not(.selected):not(.out-of-limit):hover .pipVal
+    ) {
     transition: none;
     font-weight: bold;
   }

package.json

@@ -679,6 +679,7 @@
       {orientationStart}
       {hoverable}
       {disabled}
+      {limits}
       {all}
       {first}
       {last}

src/lib/components/RangePips.svelte

@@ -66,7 +66,6 @@ export const alignValueToStep = function (
   precision: number = 2,
   limits: [number, number] | null = 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);
@@ -142,6 +141,11 @@ export const isInRange = (value: number, range: number[], type: string | boolean
   }
 };
 
+export const isOutOfLimit = (value: number, limits: number[] | null) => {
+  if (!limits) return false;
+  return value < limits[0] || value > limits[1];
+};
+
 /**
  * helper to check if the given value is selected
  * @param value the value to check if is selected

src/lib/components/RangeSlider.svelte

@@ -318,6 +318,8 @@
             bind:values={limitBind}
             range
             limits={null}
+            pips
+            all="label"
             pushy
             float
             {reversed}
@@ -336,6 +338,8 @@
           <RangeSlider
             bind:values={limitBind2}
             limits={[20, 80]}
+            pips
+            all="label"
             pushy
             float
             {reversed}
@@ -356,6 +360,8 @@
             bind:values={limitBind2}
             range
             limits={[20, 80]}
+            pips
+            all="label"
             pushy
             float
             {reversed}
@@ -375,6 +381,8 @@
             bind:values={limitBind3}
             range="min"
             limits={[20, 80]}
+            pips
+            all="label"
             pushy
             float
             {reversed}