Range Slider
Two overlapping <input type="range"> elements that select a numeric interval. The initial fill renders correctly from SSR. Thumb-collision prevention requires a JS event listener or the RangeSlider island.
Default
<RangeSlider value={[25, 75]} />Color
<RangeSlider value={[30, 70]} color="violet" />
<RangeSlider value={[30, 70]} color="blue" />
<RangeSlider value={[30, 70]} color="green" />Size
<RangeSlider value={[20, 80]} size="xs" />
<RangeSlider value={[20, 80]} size="sm" />
<RangeSlider value={[20, 80]} size="md" />
<RangeSlider value={[20, 80]} size="lg" />
<RangeSlider value={[20, 80]} size="xl" />With marks
<RangeSlider
value={[25, 75]}
marks={[
{ value: 0, label: '0' },
{ value: 25, label: '25' },
{ value: 50, label: '50' },
{ value: 75, label: '75' },
{ value: 100, label: '100' },
]}
/>Custom bounds & step
<RangeSlider value={[200, 800]} min={0} max={1000} step={100} />Disabled
<RangeSlider value={[30, 70]} disabled />Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | [number, number] | — | SSR range snapshot — [start, end] |
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 range |
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 | — | Name prefix — produces {name}Low and {name}High |