From 90dbd1562b04df3cf4de28874b6e790ddca1db81 Mon Sep 17 00:00:00 2001
From: mmamedel <mmamedel@gmail.com>
Date: Sat, 10 Feb 2024 23:44:39 -0500
Subject: [PATCH] fix(slider): dispatch `on:input` event (#1906)

Fixes #1643

The dispatched `on:change` event in `Slider` only fires when the slider thumb is released. `on:input` fires when actively dragging the thumb, and should fire on every increment (e.g., 1, 2, 3).
---
 COMPONENT_INDEX.md              | 1 +
 docs/src/COMPONENT_API.json     | 1 +
 src/Slider/Slider.svelte        | 2 ++
 tests/Slider.test.svelte        | 3 +++
 types/Slider/Slider.svelte.d.ts | 1 +
 5 files changed, 8 insertions(+)

diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
index c2d9a634..1fa30739 100644
--- a/COMPONENT_INDEX.md
+++ b/COMPONENT_INDEX.md
@@ -3533,6 +3533,7 @@ None.
 | Event name | Type       | Detail              |
 | :--------- | :--------- | :------------------ |
 | change     | dispatched | <code>number</code> |
+| input      | dispatched | <code>number</code> |
 | click      | forwarded  | --                  |
 | mouseover  | forwarded  | --                  |
 | mouseenter | forwarded  | --                  |
diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json
index 9270aadf..f9058608 100644
--- a/docs/src/COMPONENT_API.json
+++ b/docs/src/COMPONENT_API.json
@@ -11361,6 +11361,7 @@
       ],
       "events": [
         { "type": "dispatched", "name": "change", "detail": "number" },
+        { "type": "dispatched", "name": "input", "detail": "number" },
         { "type": "forwarded", "name": "click", "element": "div" },
         { "type": "forwarded", "name": "mouseover", "element": "div" },
         { "type": "forwarded", "name": "mouseenter", "element": "div" },
diff --git a/src/Slider/Slider.svelte b/src/Slider/Slider.svelte
index 321b9b49..a2696921 100644
--- a/src/Slider/Slider.svelte
+++ b/src/Slider/Slider.svelte
@@ -1,6 +1,7 @@
 <script>
   /**
    * @event {number} change
+   * @event {number} input
    */
 
   /** Specify the value of the slider */
@@ -109,6 +110,7 @@
     }
 
     value = nextValue;
+    dispatch("input", value);
   }
 
   $: labelId = `label-${id}`;
diff --git a/tests/Slider.test.svelte b/tests/Slider.test.svelte
index 419bfbff..52af2144 100644
--- a/tests/Slider.test.svelte
+++ b/tests/Slider.test.svelte
@@ -14,6 +14,9 @@
   on:change="{(e) => {
     console.log(e.detail); // number
   }}"
+  on:input="{(e) => {
+    console.log(e.detail); // number
+  }}"
 />
 
 <Slider
diff --git a/types/Slider/Slider.svelte.d.ts b/types/Slider/Slider.svelte.d.ts
index fb6c6b74..847d3447 100644
--- a/types/Slider/Slider.svelte.d.ts
+++ b/types/Slider/Slider.svelte.d.ts
@@ -127,6 +127,7 @@ export default class Slider extends SvelteComponentTyped<
   SliderProps,
   {
     change: CustomEvent<number>;
+    input: CustomEvent<number>;
     click: WindowEventMap["click"];
     mouseover: WindowEventMap["mouseover"];
     mouseenter: WindowEventMap["mouseenter"];