Bindings / Numeric inputs • Svelte Tutorial

Basic Svelte Bindings Numeric inputs

DOMの中では、全てが文字列(string)です。これは、数値の input（type="number" と type="range"）を扱う際、その値を取り出す時に input.value を使わなければならないため、不便です。

bind:value を使用すれば、Svelte がそれを代行してくれます。

App

<label>
	<input type="number" bind:value={a} min="0" max="10" />
	<input type="range" bind:value={a} min="0" max="10" />
</label>

<label>
	<input type="number" bind:value={b} min="0" max="10" />
	<input type="range" bind:value={b} min="0" max="10" />
</label>

Edit this page on GitHub

previous next

Text inputs Checkbox inputs

<script>

	let a = $state(1);

	let b = $state(2);

</script>

<label>

	<input type="number" value={a} min="0" max="10" />

	<input type="range" value={a} min="0" max="10" />

</label>

<label>

	<input type="number" value={b} min="0" max="10" />

	<input type="range" value={b} min="0" max="10" />

</label>

<p>{a} + {b} = {a + b}</p>

show text show editor