Component reference
Slider
Native range control.
Preview
A value in a range
A native range control. Arrow keys, Home, and End move it; the figure beside the track is the same value assistive technology reads.
render: () => {
const volume = signal(40);
return (
<Specimens>
<Specimen label="Adjustable" align="start">
<Field label="Volume" htmlFor="story-volume">
<Slider
id="story-volume"
label="Volume"
min={0}
max={100}
step={5}
value={volume}
onValueChange={(next) => {
volume.value = next;
}}
/>
</Field>
</Specimen>
<Specimen label="Disabled" align="start">
<Slider label="Unavailable" defaultValue={20} disabled />
</Specimen>
</Specimens>
);
}Installation
bun add meowtail
Usage
Taken from the examples on this page.
import { Slider } from "meowtail";
<Slider label="Unavailable" defaultValue={20} disabled />API reference
The visible figure is the same value assistive technology reads.
Props
| Prop | Type | Default |
|---|---|---|
labelRequiredAccessible name for the native range control. | string | – |
value | MaybeSignal<number> | – |
defaultValue | number | – |
min | number | 0 |
max | number | 100 |
step | number | 1 |
disabled | boolean | – |
name | string | – |
id | string | – |
onValueChange | (value: number) => void | – |
onInput | (event: Event) => void | – |
Also takes className, children and the attributes and events of its root element.
DOM parts
rootcontroltrackthumbvalue
Registry
The component is registered as slider in the meowtail component registry.