All controls have the value
property to define the initial value, and you can use Svelte bind directive to receive instant updates:
<Text bind:value={text1} placeholder="Type here" />
Additionally, controls can dispatch events (e.g. "change", "input", "select") to signal inner changes. Check the documentation for specific controls:
<script>
function showChanges(ev) {
console.log(ev.detail.selected); //CustomEvent
}
</script>
<DateRangePicker value={date} on:select={showChanges} />