Slider
A native <input type="range"> with a styled gradient fill. The initial fill percentage is computed in SSR from the value prop. The fill updates on drag with a JS event listener or by using the Slider island.
Default
<Slider value={40} />Color
<Slider value={60} color="violet" />
<Slider value={60} color="blue" />
<Slider value={60} color="green" />
<Slider value={60} color="red" />Size
<Slider value={50} size="xs" />
<Slider value={50} size="sm" />
<Slider value={50} size="md" />
<Slider value={50} size="lg" />
<Slider value={50} size="xl" />With marks
<Slider
value={40}
marks={[
{ value: 0, label: '0' },
{ value: 25, label: '25' },
{ value: 50, label: '50' },
{ value: 75, label: '75' },
{ value: 100, label: '100' },
]}
/>Step & bounds
<Slider value={250} min={0} max={1000} step={50} />
<Slider value={0.5} min={0} max={1} step={0.1} />Disabled
<Slider value={40} disabled />Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | — | SSR value snapshot — used to compute initial fill |
min | number | 0 | Minimum selectable value |
max | number | 100 | Maximum selectable value |
step | number | 1 | Step between selectable values |
marks | { value: number; label?: string }[] | — | Tick marks along the track |
color | UiColor | — | Accent color for the filled track |
size | 'xs'|'sm'|'md'|'lg'|'xl' | — | Track height and thumb size |
radius | 'xs'|'sm'|'md'|'lg'|'xl'|string | — | Thumb border-radius |
disabled | boolean | — | Prevents interaction |
name | string | — | Form field name |