fix issue with change event not firing on first keyboard interaction

Author: simeydotme

dist/range-slider-pips.js

@@ -337,7 +337,7 @@ function moveHandle(index, value2, fireEvent = true) {
 function fireChangeEvent(values2) {
   const hasChanged = previousValues.some((prev, index) => {
     return prev !== values2[index];
-  });
+  }) || previousValues.length !== values2.length;
   if (hasChanged) {
     eChange();
     previousValues = [...values2];
@@ -392,20 +392,24 @@ function sliderKeydown(event) {
       case "PageUp":
       case "ArrowRight":
       case "ArrowUp":
+        setStartAndPreviousValues();
         moveHandle(handle, values[handle] + jump);
         prevent = true;
         break;
       case "PageDown":
       case "ArrowLeft":
       case "ArrowDown":
+        setStartAndPreviousValues();
         moveHandle(handle, values[handle] - jump);
         prevent = true;
         break;
       case "Home":
+        setStartAndPreviousValues();
         moveHandle(handle, min);
         prevent = true;
         break;
       case "End":
+        setStartAndPreviousValues();
         moveHandle(handle, max);
         prevent = true;
         break;
@@ -416,6 +420,10 @@ function sliderKeydown(event) {
     }
   }
 }
+function setStartAndPreviousValues() {
+  startValues = values.map((v) => constrainAndAlignValue(v, min, max, step, precision, limits));
+  previousValues = [...startValues];
+}
 function sliderInteractStart(event) {
   if (!disabled) {
     const target = event.target;
@@ -436,8 +444,7 @@ function sliderInteractStart(event) {
         handleInteract(clientPos);
       }
     }
-    startValues = values.map((v) => constrainAndAlignValue(v, min, max, step, precision, limits));
-    previousValues = [...startValues];
+    setStartAndPreviousValues();
     eStart();
   }
 }
@@ -519,7 +526,7 @@ function eStop() {
 function eChange() {
   if (disabled) return;
   const startValue = rangeActivated ? startValues : startValues[activeHandle];
-  const previousValue = typeof previousValues === "undefined" ? startValue : rangeActivated ? previousValues : previousValues[activeHandle];
+  const previousValue = previousValues.length === 0 ? startValue : rangeActivated ? previousValues : previousValues[activeHandle];
   dispatch("change", {
     activeHandle,
     startValue,

dist/range-slider-pips.mjs

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

dist/svelte/components/RangeSlider.svelte

@@ -518,9 +518,10 @@
    */
   function fireChangeEvent(values: number[]) {
     // Check if any value has changed by comparing each element
-    const hasChanged = previousValues.some((prev, index) => {
-      return prev !== values[index];
-    });
+    const hasChanged =
+      previousValues.some((prev, index) => {
+        return prev !== values[index];
+      }) || previousValues.length !== values.length;
 
     if (hasChanged) {
       eChange();
@@ -609,20 +610,24 @@
         case 'PageUp':
         case 'ArrowRight':
         case 'ArrowUp':
+          setStartAndPreviousValues();
           moveHandle(handle, values[handle] + jump);
           prevent = true;
           break;
         case 'PageDown':
         case 'ArrowLeft':
         case 'ArrowDown':
+          setStartAndPreviousValues();
           moveHandle(handle, values[handle] - jump);
           prevent = true;
           break;
         case 'Home':
+          setStartAndPreviousValues();
           moveHandle(handle, min);
           prevent = true;
           break;
         case 'End':
+          setStartAndPreviousValues();
           moveHandle(handle, max);
           prevent = true;
           break;
@@ -634,6 +639,14 @@
     }
   }
 
+  /**
+   * set the start and previous values to the current values when the user interacts with the slider
+   */
+  function setStartAndPreviousValues() {
+    startValues = values.map((v) => constrainAndAlignValue(v, min, max, step, precision, limits));
+    previousValues = [...startValues];
+  }
+
   /**
    * function to run when the user touches
    * down on the slider element anywhere
@@ -663,9 +676,7 @@
           handleInteract(clientPos);
         }
       }
-      // fire the start event
-      startValues = values.map((v) => constrainAndAlignValue(v, min, max, step, precision, limits));
-      previousValues = [...startValues];
+      setStartAndPreviousValues();
       eStart();
     }
   }
@@ -791,11 +802,7 @@
     if (disabled) return;
     const startValue = rangeActivated ? startValues : startValues[activeHandle];
     const previousValue =
-      typeof previousValues === 'undefined'
-        ? startValue
-        : rangeActivated
-          ? previousValues
-          : previousValues[activeHandle];
+      previousValues.length === 0 ? startValue : rangeActivated ? previousValues : previousValues[activeHandle];
     dispatch('change', {
       activeHandle,
       startValue,

package-lock.json

@@ -29,6 +29,10 @@
       }
     ]
   },
+  {
+    "name": "keyboard",
+    "path": "/test/range-slider/keyboard"
+  },
   {
     "name": "limits",
     "path": "/test/range-slider/limits"
@@ -121,7 +125,7 @@
   },
   {
     "name": "spring",
-    "path": "/test/range-slider/spring",
+    "path": "",
     "children": [
       {
         "name": "configurations",
@@ -130,10 +134,6 @@
       {
         "name": "dynamic",
         "path": "/test/range-slider/spring/dynamic"
-      },
-      {
-        "name": "edge-cases",
-        "path": "/test/range-slider/spring/edge-cases"
       }
     ]
   },

package.json

@@ -20,21 +20,20 @@
   function handleStart(event: CustomEvent) {
     events.push({ type: 'start', detail: event.detail });
     events = [...events];
-    lastEvent = { type: 'start', detail: event.detail };
   }
 
   function handleStop(event: CustomEvent) {
     events.push({ type: 'stop', detail: event.detail });
     events = [...events];
-    lastEvent = { type: 'stop', detail: event.detail };
   }
 
   function handleChange(event: CustomEvent) {
     events.push({ type: 'change', detail: event.detail });
     events = [...events];
-    lastEvent = { type: 'change', detail: event.detail };
   }
 
+  $: lastEvent = events[events.length - 1];
+
   // Test scenarios
   function clearTestScenario() {
     events = [];