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
xxxxxxxxxx
16
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
xxxxxxxxxx
95
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
space
13
} from "svelte/internal";
14
15
function create_fragment(ctx) {
16
let label0;
Compiler options
result = svelte.compile(source, {
generate:
});xxxxxxxxxx
1
1
/* Add a <style> tag to see compiled CSS */