DOMの中では、全てが文字列(string)です。これは、数値のinput(type="number"
と type="range"
)を扱う際、その値を取り出す時にinput.value
を使わなければならないため、不便です。
bind:value
を使用すれば、Svelteがそれを代行してくれます。
App.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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script>
let a = 1;
let b = 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>