Range Input Returns a String Unexpectedly in SvelteKit

[njezersek]

Describe the bug

When using a range input in a SvelteKit app and binding its value to a state variable that starts with a value outside the defined range (min, max), the variable is coerced into the range but unexpectedly converted to a string.

This issue appears to be specific to SvelteKit.

Expected Behavior

The variable bound to the range input should always retain its numeric type, even when its initial value is coerced into the range.

Reproduction

Reproducing example:

<script>
	let myNumber = $state(1.5);
	$inspect(myNumber);
</script>

<input bind:value={myNumber} type="range" min={0} max={1} step={0.01}>
{#if typeof myNumber == "number"}
<pre>{myNumber.toFixed(2)}</pre>
{:else}
	<pre>My number is not a number! {myNumber}</pre>
{/if}

https://stackblitz.com/edit/sveltejs-kit-template-default-9wzchg?file=src%2Froutes%2F%2Bpage.svelte

When the page loads, myNumber has a string type, and the following message is displayed: My number is not a number! 1 is displayed.

Logs

No response

System Info

Binaries:
    Node: 20.7.0 - C:\Program Files\nodejs\node.EXE
    npm: 10.1.0 - C:\Program Files\nodejs\npm.CMD
  npmPackages:
    @sveltejs/adapter-auto: ^3.0.0 => 3.2.2 
    @sveltejs/adapter-node: ^5.2.0 => 5.2.0 
    @sveltejs/adapter-static: ^3.0.6 => 3.0.6 
    @sveltejs/kit: ^2.0.0 => 2.5.19 
    @sveltejs/vite-plugin-svelte: ^4.0.0 => 4.0.1 
    svelte: ^5.0.0 => 5.2.1 
    vite: ^5.0.3 => 5.3.5

Severity

annoyance

Additional Information

No response