Slider
Accessible horizontal slider.
role="slider" on a focusable thumb with aria-valuemin/max/now; full keyboard (arrows, PageUp/Down, Home/End) plus pointer drag and click-to-seek. Two callbacks on purpose: onValueChange is live and fires on every snapped step (drive a cheap preview with it), while onValueCommit fires once the user is done — on pointer release, and on each keyboard step, which is already a discrete decision. Expensive work belongs on the commit channel; a drag across the track is ~100 live changes. Styling inspired by melt-next's slider: range + thumb animate together on keyboard/click but snap 1:1 while dragging; rounded-square thumb with border, shadow and focus ring, which grows a little while held.
Forms · two-way: bind:value · submits in a form with name · keyboard contract
<script lang="ts">
import { Slider } from '@l4st/driftwood';
</script>
| Light | Dark |
|---|---|
 |
 |
Props
| Prop | Type | Default | What it does |
|---|---|---|---|
value bind: |
number |
0 |
Snapped to step and clamped to min/max. |
min |
number |
0 |
Lower bound of the range. |
max |
number |
100 |
Upper bound of the range. |
step |
number |
1 |
Arrow-key and rounding increment. Page keys move ten of them. |
disabled |
boolean |
false |
Blocks dragging and keyboard stepping. |
class |
string |
— | Merged with the component's own classes, last — so yours win. |
id |
string |
— | Points a <Label for=…> at the thumb. |
name |
string |
— | Submits the current value with the form under this name. |
aria-label |
string |
— | Accessible name, when no visible <Label for=…> points at this. |
aria-labelledby |
string |
— | Id of the element that names this, instead of aria-label. |
onValueChange |
(value: number) => void |
— | Every snapped change, including each frame of a drag. |
onValueCommit |
(value: number) => void |
— | The user settled on a value: pointer release, or a keyboard step. |
Keyboard
| Key | Does |
|---|---|
| ← / →, ↑ / ↓ | move by one step |
| PageUp / PageDown | move by ten steps |
| Home / End | minimum / maximum |
Example
The markup behind the screenshot above, lifted from src/routes/shots/ — so it
compiles, and it is exactly what produced the image.
<Slider bind:value={threshold} aria-label="Alert threshold" />
Forms · Field · Input · FileInput · FileList · Textarea · CodeEditor · Combobox · RadioGroup · NumberInput · InlineEdit · Label · Select · MultiSelect · DatePicker · TagsInput · Checkbox · Switch