refactor(RangeField): Add custom change event which fires on all valu…

…e changes instead of only on pointer up (matching other input/fields)
techniq · Nov 20, 2024 · 21b657a · 21b657a
1 parent 3c04e5e
commit 21b657a
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 2 deletions.
diff --git a/.changeset/short-tables-fail.md b/.changeset/short-tables-fail.md
@@ -2,4 +2,4 @@
 'svelte-ux': patch
 ---
 
-feat(RangeField): Forward `change` event from underlying `<input type="range">`
+feat(RangeField): Add `change` event
diff --git a/packages/svelte-ux/src/lib/components/RangeField.svelte b/packages/svelte-ux/src/lib/components/RangeField.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { createEventDispatcher } from 'svelte';
   import { mdiChevronLeft, mdiChevronRight } from '@mdi/js';
 
   import Field from './Field.svelte';
@@ -17,6 +18,9 @@
   export let format: FormatNumberStyle = 'none';
 
   $: restProps = { ...defaults, ...$$restProps };
+
+  const dispatch = createEventDispatcher<{ change: { value: number } }>();
+  $: dispatch('change', { value });
 </script>
 
 <Field let:id classes={{ input: 'my-1' }} {...restProps}>
@@ -29,7 +33,7 @@
     />
   </span>
 
-  <input type="range" bind:value {min} {max} {step} {id} on:change class="h-6 w-full" />
+  <input type="range" bind:value {min} {max} {step} {id} class="h-6 w-full" />
 
   <!-- Stack on top to account for min/max value width -->
   <span class="ml-2 text-sm text-surface-content/50 tabular-nums text-right inline-grid">