Change event listener for SlideToggle

[dumtux]

Describe what feature you'd like. Pseudo-code, mockups, or screenshots of similar solutions are encouraged!

Is it possible to have event listener of SlideToggle like this?

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

	function onChange() {
		console.log(is_checked);
	}
</script>

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

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

What type of pull request would this be?

No response

Any links to similar examples or other references we should review?

No response

[endigo9740]

Hey @dumtux I'd recommend checking the source code to see how we forward events for this component. Most events are attached to the hidden checkbox input within the component template:

https://github.com/Brain-Bones/skeleton/blob/dev/src/lib/components/SlideToggle/SlideToggle.svelte#L75

This is also included in the component documentation:

So an on:change event handler should work but you'll need to reformat it a bit:

<SlideToggle bind:checked={is_monitoring} on:change={onChange}</SlideToggle>

Then your console.log in the function should return the expected value. If for some reason you wish to obtain the state directly from the event, you would modify your onChange function like so:

function onChange(event: any) {
    console.log(event.target.checked);
}

NOTE: I think the type would be MouseEvent, if you want to replace any, but that's untested.

Let me know if this works for you!

[endigo9740]

Note, small issue above that I've corrected. It should be event.target.checked not value!

[dumtux]

Yes, this worked perfectly.
I had to check the documentation in more detail.

[endigo9740]

@dumtux No worries, glad it worked. Note we're still in the process of adding and refining events in the docs, so some components may lack desired events.

We have a ticket to address this in the near future though:

• Improve events and documentation #389