GitHub
Welcome to Immerse Media Lab

Data ordinarily flows down, from parent to child. The bind: directive allows data to flow the other way, from child to parent. Most bindings are specific to particular elements. The simplest bindings reflect the value of a property, such as input.value.

If the name matches the value, you can use a shorthand.

Numeric input values are coerced; even though input.value is a string as far as the DOM is concerned, Svelte will treat it as a number. If the input is empty or invalid (in the case of type="number"), the value is undefined.

Binding <select> value
A <select> value binding corresponds to the value property on the selected <option>, which can be any value (not just strings, as is normally the case in the DOM).

A <select multiple> element behaves similarly to a checkbox group. When the value of an <option> matches its text content, the attribute can be omitted. Elements with the contenteditable attribute support innerHTML and textContent bindings.

Media element bindings

Media elements (<audio> and <video>) have their own set of bindings — six readonly ones... duration (readonly) — the total duration of the video, in seconds buffered (readonly) — an array of {start, end} objects played (readonly) — ditto seekable (readonly) — ditto seeking (readonly) — boolean ended (readonly) — boolean

...and five two-way bindings:

currentTime — the current playback time in the video, in seconds
playbackRate — how fast or slow to play the video, where 1 is 'normal'
paused — this one should be self-explanatory volume — a value between 0
and 1 muted — a boolean value where true is muted

Videos additionally have readonly videoWidth and videoHeight bindings.