Merge branch 'min-max-zero-#20' into main

Author: simeydotme

README.md

@@ -103,6 +103,7 @@ prop | type | default | description
 **rest** | `Boolean`/`String` | `false` | Whether to show a pip or label for the all other values. Use `rest='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
+**disabled** | `Boolean` | `false` | Determine if the slider is disabled, or enabled _(only disables interactions, and events)_
 **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

dist/svelte-range-slider-pips.js

@@ -1,6 +1,6 @@
 {
   "name": "svelte-range-slider-pips",
-  "version": "1.6.1",
+  "version": "1.7.0",
   "svelte": "src/index.js",
   "module": "dist/svelte-range-slider-pips.mjs",
   "main": "dist/svelte-range-slider-pips.js",

dist/svelte-range-slider-pips.mjs

@@ -13,6 +13,7 @@
   export let vertical = false;
   export let float = false;
   export let hover = true;
+  export let disabled = false;
 
   // range pips / values props
   export let pips = false;
@@ -50,21 +51,26 @@
 
   // copy the initial values in to a spring function which
   // will update every time the values array is modified
-  let springPositions = spring(
-    values.map((v) =>
-      parseFloat((((v - min) / (max - min)) * 100).toFixed(precision))
-    ),
-    springValues
-  );
-
-  // check the values array, and trim it if needed (range)
-  // and clamp the values to the steps and boundaries set up in the slider
-  $: values = trimRange(values).map((v) => alignValueToStep(v));
-
-  // update the spring function so that movement can happen in the UI
+  let springPositions;
+
   $: {
-    springPositions.set(values.map((v) => percentOf(v)));
-  }
+    // check that "values" is an array, or set it as array
+    // to prevent any errors in springs, or range trimming
+    if ( !Array.isArray( values ) ) {
+      values = [(max + min) / 2];
+      console.error( "'values' prop should be an Array (https://github.com/simeydotme/svelte-range-slider-pips#slider-props)" );
+    }
+    // trim the range as needed
+    values = trimRange(values);
+    // clamp the values to the steps and boundaries set up in the slider
+    values = values.map((v) => alignValueToStep(v));
+    // update the spring function so that movement can happen in the UI
+    if ( springPositions ) {
+      springPositions.set(values.map((v) => percentOf(v)));
+    } else {
+      springPositions = spring( values.map((v) => percentOf(v)), springValues );
+    }
+  };
 
   /**
    * take in a value, and then calculate that value's percentage
@@ -167,7 +173,9 @@
 
   /**
    * trim the values array based on whether the property
-   * for 'range' is 'min', 'max', or truthy.
+   * for 'range' is 'min', 'max', or truthy. This is because we
+   * do not want more than one handle for a min/max range, and we do
+   * not want more than two handles for a true range.
    * @param {array} values the input values for the rangeSlider
    * @return {array} the range array for creating a rangeSlider
    **/
@@ -352,8 +360,10 @@
    * @param {event} e the event from browser
    **/
   function sliderFocusHandle(e) {
-    activeHandle = index(e.target);
-    focus = true;
+    if ( !disabled ) {
+      activeHandle = index(e.target);
+      focus = true;
+    }
   }
 
   /**
@@ -362,37 +372,39 @@
    * @param {event} e the event from browser
    **/
   function sliderKeydown(e) {
-    const handle = index(e.target);
-    let jump = e.ctrlKey || e.metaKey || e.shiftKey ? step * 10 : step;
-    let prevent = false;
-
-    switch (e.key) {
-      case "PageDown":
-        jump *= 10;
-      case "ArrowRight":
-      case "ArrowUp":
-        moveHandle(handle, values[handle] + jump);
-        prevent = true;
-        break;
-      case "PageUp":
-        jump *= 10;
-      case "ArrowLeft":
-      case "ArrowDown":
-        moveHandle(handle, values[handle] - jump);
-        prevent = true;
-        break;
-      case "Home":
-        moveHandle(handle, min);
-        prevent = true;
-        break;
-      case "End":
-        moveHandle(handle, max);
-        prevent = true;
-        break;
-    }
-    if (prevent) {
-      e.preventDefault();
-      e.stopPropagation();
+    if ( !disabled ) {
+      const handle = index(e.target);
+      let jump = e.ctrlKey || e.metaKey || e.shiftKey ? step * 10 : step;
+      let prevent = false;
+
+      switch (e.key) {
+        case "PageDown":
+          jump *= 10;
+        case "ArrowRight":
+        case "ArrowUp":
+          moveHandle(handle, values[handle] + jump);
+          prevent = true;
+          break;
+        case "PageUp":
+          jump *= 10;
+        case "ArrowLeft":
+        case "ArrowDown":
+          moveHandle(handle, values[handle] - jump);
+          prevent = true;
+          break;
+        case "Home":
+          moveHandle(handle, min);
+          prevent = true;
+          break;
+        case "End":
+          moveHandle(handle, max);
+          prevent = true;
+          break;
+      }
+      if (prevent) {
+        e.preventDefault();
+        e.stopPropagation();
+      }
     }
   }
 
@@ -402,21 +414,23 @@
    * @param {event} e the event from browser
    **/
   function sliderInteractStart(e) {
-    const clientPos = normalisedClient(e);
-    // set the closest handle as active
-    focus = true;
-    handleActivated = true;
-    handlePressed = true;
-    activeHandle = getClosestHandle(clientPos);
-
-    // fire the start event
-    startValue = previousValue = alignValueToStep(values[activeHandle]);
-    eStart();
-
-    // for touch devices we want the handle to instantly
-    // move to the position touched for more responsive feeling
-    if (e.type === "touchstart") {
-      handleInteract(clientPos);
+    if ( !disabled ) {
+      const clientPos = normalisedClient(e);
+      // set the closest handle as active
+      focus = true;
+      handleActivated = true;
+      handlePressed = true;
+      activeHandle = getClosestHandle(clientPos);
+
+      // fire the start event
+      startValue = previousValue = alignValueToStep(values[activeHandle]);
+      eStart();
+
+      // for touch devices we want the handle to instantly
+      // move to the position touched for more responsive feeling
+      if (e.type === "touchstart") {
+        handleInteract(clientPos);
+      }
     }
   }
 
@@ -451,8 +465,10 @@
    * @param {event} e the event from browser
    **/
   function bodyInteract(e) {
-    if (handleActivated) {
-      handleInteract(normalisedClient(e));
+    if ( !disabled ) {
+      if (handleActivated) {
+        handleInteract(normalisedClient(e));
+      }
     }
   }
 
@@ -463,20 +479,22 @@
    * @param {event} e the event from browser
    **/
   function bodyMouseUp(e) {
-    const el = e.target;
-    // this only works if a handle is active, which can
-    // only happen if there was sliderInteractStart triggered
-    // on the slider, already
-    if (handleActivated) {
-      if (el === slider || slider.contains(el)) {
-        focus = true;
-        if (!targetIsHandle(el)) {
-          handleInteract(normalisedClient(e));
+    if ( !disabled ) {
+      const el = e.target;
+      // this only works if a handle is active, which can
+      // only happen if there was sliderInteractStart triggered
+      // on the slider, already
+      if (handleActivated) {
+        if (el === slider || slider.contains(el)) {
+          focus = true;
+          if (!targetIsHandle(el)) {
+            handleInteract(normalisedClient(e));
+          }
         }
+        // fire the stop event for mouse device
+        // when the body is triggered with an active handle
+        eStop();
       }
-      // fire the stop event for mouse device
-      // when the body is triggered with an active handle
-      eStop();
     }
     handleActivated = false;
     handlePressed = false;
@@ -493,21 +511,23 @@
   }
 
   function bodyKeyDown(e) {
-    if (e.target === slider || slider.contains(e.target)) {
-      keyboardActive = true;
+    if ( !disabled ) {
+      if (e.target === slider || slider.contains(e.target)) {
+        keyboardActive = true;
+      }
     }
   }
 
   function eStart() {
-    dispatch("start", {
+    !disabled && dispatch("start", {
       activeHandle,
       value: startValue,
       values: values.map((v) => alignValueToStep(v)),
     });
   }
 
   function eStop() {
-    dispatch("stop", {
+    !disabled && dispatch("stop", {
       activeHandle,
       startValue: startValue,
       value: values[activeHandle],
@@ -516,7 +536,7 @@
   }
 
   function eChange() {
-    dispatch("change", {
+    !disabled && dispatch("change", {
       activeHandle,
       startValue: startValue,
       previousValue:
@@ -545,6 +565,7 @@
     border-radius: 100px;
     height: 0.5em;
     margin: 1em;
+    transition: opacity 0.2s ease;
   }
   :global(.rangeSlider, .rangeSlider *) {
     user-select: none;
@@ -695,13 +716,21 @@
     background-color: #4a40d4;
     background-color: var(--float);
   }
+  :global(.rangeSlider.disabled ) {
+    opacity: 0.5;
+  }
+  :global(.rangeSlider.disabled .rangeNub) {
+    background-color: #d7dada;
+    background-color: var(--slider);
+  }
 </style>
 
 <div
   {id}
   bind:this={slider}
   class="rangeSlider"
   class:range
+  class:disabled
   class:vertical
   class:focus
   class:min={range === 'min'}
@@ -716,9 +745,8 @@
   {#each values as value, index}
     <span
       role="slider"
-      tabindex="0"
       class="rangeHandle"
-      class:hoverable={hover}
+      class:hoverable={hover && !disabled}
       class:active={focus && activeHandle === index}
       class:press={handlePressed && activeHandle === index}
       on:blur={sliderBlurHandle}
@@ -729,7 +757,11 @@
       aria-valuemax={range === true && index === 0 ? values[1] : max}
       aria-valuenow={value}
       aria-valuetext="{prefix}{handleFormatter(value)}{suffix}"
-      aria-orientation={vertical ? 'vertical' : 'horizontal'}>
+      aria-orientation={vertical ? 'vertical' : 'horizontal'}
+      aria-disabled={disabled}
+      {disabled}
+      tabindex="{ disabled ? -1 : 0 }"
+    >
       <span class="rangeNub" />
       {#if float}
         <span class="rangeFloat">{prefix}{handleFormatter(value)}{suffix}</span>
@@ -759,6 +791,7 @@
       {suffix}
       {formatter}
       {focus}
+      {disabled}
       {percentOf} />
   {/if}
 </div>