In the DOM, everything is a string. That's unhelpful when you're dealing with numeric inputs — type="number" and type="range" — as it means you have to remember to coerce input.value before using it.
With bind:value, Svelte takes care of it for you:
<input type=number bind:value={a} min=0 max=10>
<input type=range bind:value={a} min=0 max=10>App.svelte
xxxxxxxxxx16
1
<script>2
let a = 1;3
let b = 2;4
</script>5
6
<label>7
<input type=number value={a} min=0 max=10>8
<input type=range value={a} min=0 max=10>9
</label>10
11
<label>12
<input type=number value={b} min=0 max=10>13
<input type=range value={b} min=0 max=10>14
</label>15
16
<p>{a} + {b} = {a + b}</p>Console
xxxxxxxxxx95
1
/* App.svelte generated by Svelte v3.23.2 */2
import {3
SvelteComponent,4
append,5
attr,6
detach,7
element,8
init,9
insert,10
noop,11
safe_not_equal,12
space13
} from "svelte/internal";14
15
function create_fragment(ctx) {16
let label0;Compiler options
result = svelte.compile(source, {
generate:
});xxxxxxxxxx1
1
/* Add a <style> tag to see compiled CSS */