Slider
Draggable and keyboard-accessible range slider with bindable value, step snapping, and remote-form support.
Loyalty points
Bind the value to track the current selection. The value snaps to the step and is clamped to [min, max].
Using 8 of 20 points
import { Slider } from '@mediayard/agoratopia-ui/components/slider';
let points = $state(8);
<Slider bind:value={points} min={0} max={20} />
<p>Using {points} points</p> Custom step
A larger step makes the slider snap to coarser increments. PageUp/PageDown jump by ten steps.
Volume: 50
let volume = $state(50);
<Slider bind:value={volume} min={0} max={100} step={5} /> Disabled
When max is less than or equal to min (e.g. no points available) the slider renders disabled.
<Slider value={0} min={0} max={0} />