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

@@ -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  | --                  |

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" },

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}`;

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

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"];