Skip to main content

You can pass event handlers to components like any other prop. In Stepper.svelte, add increment and decrement props...

Stepper
<script>
	let { increment, decrement } = $props();
</script>

...and wire them up:

Stepper
<button onclick={decrement}>-1</button>
<button onclick={increment}>+1</button>

In App.svelte, define the handlers:

<Stepper
	increment={() => value += 1}
	decrement={() => value -= 1}
/>

Edit this page on GitHub

<script>
import Stepper from './Stepper.svelte';

let value = $state(0);
</script>

<p>The current value is {value}</p>

<Stepper />