本文へ移動

DOMでは、すべての入力値は文字列です。これは、数値入力(`type="number"`と`type="range"`)を扱う際に役立ちません。なぜなら、`input.value`を使用する前に強制的に変換する必要があるからです。

`bind:value`を使用すると、Svelteがその処理を代行します。

アプリ
<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>

GitHubでこのページを編集する

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<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>