Change event listener for `SlideToggle` of Skeleton (Svelte UI kit)

Issue

Using SlideToggle of Skeleton, I am creating a toggle switch like this.

<script lang="ts">
    import { SlideToggle } from '@brainandbones/skeleton';
    let is_checked: boolean = false;
</script>

<div class="page-container">
    <SlideToggle bind:checked={is_monitoring}>{is_checked ? 'Activated' : 'Disabled'}</SlideToggle>
</div>

How can I get on-change event instead of polling is_checked status manually?

Solution

You can bind a change event to the toggle. This event listener will get forwarded to the underlying element in the slider.

<script lang="ts">
    import { SlideToggle } from '@brainandbones/skeleton';

    let handleOnChange = (e) => {
       // your subroutine goes here
    }
</script>

<SlideToggle on:change={handleOnChange}>Label</SlideToggle>

More info under the 'events' tab on this page of the skeleton docs.

Answered By - siraj