Using Slider inside a form causes an infinite loop

[KryptXBSA]

Describe the bug

As the title says, using the Slider component inside a form causes an infinite loop.

The browser output:

I'm using following this guide to create my form:
https://next.shadcn-svelte.com/docs/components/form

The code that causes the error:

<Form.Field {form} name="key_2a674a">
        <Form.Control>
          {#snippet children({ props })}
            <Form.Label>My number</Form.Label>
            <Slider {...props} type="single" bind:value={$formData["key_2a674a"] } max={100} step={1} class="max-w-[70%]" />
          {/snippet}
        </Form.Control>
        <Form.Description>Description</Form.Description>
        <Form.FieldErrors />
      </Form.Field>

Reproduction

stackblitz:
https://stackblitz.com/github/KryptXBSA/svelte-shadcn-slider-infinite-loop?file=src%2Froutes%2Fmy-form.svelte

github repo:
https://github.com/KryptXBSA/svelte-shadcn-slider-infinite-loop

Logs

System Info

System:
    OS: Linux 6.12 Pop!_OS 22.04 LTS
    CPU: (16) x64 AMD Ryzen 7 5700U with Radeon Graphics
    Memory: 1.03 GB / 30.69 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 22.11.0 - ~/.nvm/versions/node/v22.11.0/bin/node
    Yarn: 1.22.22 - ~/.nvm/versions/node/v22.11.0/bin/yarn
    npm: 10.9.0 - ~/.nvm/versions/node/v22.11.0/bin/npm
    pnpm: 9.15.4 - ~/.bun/bin/pnpm
    bun: 1.1.45 - ~/.bun/bin/bun
  Browsers:
    Brave Browser: 134.1.76.82
    Chrome: 134.0.6998.165

Severity

annoyance

[KryptXBSA]

Also I'm also facing this error when using the Checkbox or the Switch component:
https://svelte.dev/docs/svelte/runtime-errors#Client-errors-props_invalid_value

Cannot do `bind:checked={undefined}` when `checked` has a fallback value

I've updated the repository to demonstrate the issue, please note the page goes blank because of the error.

This bug seems to be resolved in the newer versions of svelte according to this issue but still I'm facing it when using the Checkbox component or the Switch component:
sveltejs/svelte#10241

[KryptXBSA]

Also I'm also facing this error when using the Checkbox or the Switch component: https://svelte.dev/docs/svelte/runtime-errors#Client-errors-props_invalid_value

Cannot do `bind:checked={undefined}` when `checked` has a fallback value

I've updated the repository to demonstrate the issue, please note the page goes blank because of the error.

This bug seems to be resolved in the newer versions of svelte according to this issue but still I'm facing it when using the Checkbox component or the Switch component: sveltejs/svelte#10241

I'm facing the same issue when using Input OTP am i doing something wrong?

[w4w3ru]

The Slider component in my project eventually leads to a crash as the tab uses up to 5 gigs of RAM if I place the Slider component in a conditional if-else statement where the Slider is bound to a value in one of the keys in an object. For instance:

const object = writable({ thingA: [50], thingB: true })

{#if object}
	{#each Object.entries($object) as [thingName, thingValue]}
		{#if Array.isArray(propValue) && typeof propValue !== 'boolean'}
				<Slider bind:value={object[thingName]} other-attr />
		{:else}
				<!-- other code -->
		{/if}
	{/each}
{/if}

[huntabyte]

Have you tried using a key on that each block?