chore(web): migration svelte 5 syntax (#13883)

web/src/lib/components/shared-components/number-range-input.svelte

@@ -2,14 +2,38 @@
   import { clamp } from 'lodash-es';
   import type { ClipboardEventHandler } from 'svelte/elements';
 
-  export let id: string;
-  export let min: number;
-  export let max: number;
-  export let step: number | string = 'any';
-  export let required = true;
-  export let value: number | null = null;
-  export let onInput: (value: number | null) => void;
-  export let onPaste: ClipboardEventHandler<HTMLInputElement> | undefined = undefined;
+  interface Props {
+    id: string;
+    min: number;
+    max: number;
+    step?: number | string;
+    required?: boolean;
+    value?: number;
+    onInput: (value: number | null) => void;
+    onPaste?: ClipboardEventHandler<HTMLInputElement>;
+  }
+
+  let {
+    id,
+    min,
+    max,
+    step = 'any',
+    required = true,
+    value = $bindable(),
+    onInput,
+    onPaste = undefined,
+  }: Props = $props();
+
+  const oninput = () => {
+    if (!value) {
+      return;
+    }
+
+    if (value !== null && (value < min || value > max)) {
+      value = clamp(value, min, max);
+    }
+    onInput(value);
+  };
 </script>
 
 <input
@@ -21,11 +45,6 @@
   {step}
   {required}
   bind:value
-  on:input={() => {
-    if (value !== null && (value < min || value > max)) {
-      value = clamp(value, min, max);
-    }
-    onInput(value);
-  }}
-  on:paste={onPaste}
+  {oninput}
+  onpaste={onPaste}
 />