Slider
One value on a track, or the two ends of a range
Usage
import { Slider } from "@gpuixui/components/slider";
<Slider label="Volume" defaultValue={40} onValueChange={setVolume} />;
// A pair paints two thumbs; the ends are kept in order.
<Slider label="Price" defaultValue={[20, 80]} min={0} max={200} step={5} />;The shape of value chooses the surface: a number is one thumb, a
[from, to] pair is a range. A pair passed as [70, 20] paints as 20 … 70,
and each end stops on the other rather than crossing it.
Keyboard
| Key | Effect |
|---|---|
ArrowRight / ArrowUp | one step forward |
ArrowLeft / ArrowDown | one step back |
PageUp / PageDown | ten steps |
Home / End | the track's ends |
A disabled slider stays out of the tab order and answers none of these keys.
API
| Prop | Type | Default |
|---|---|---|
value | number | readonly [number, number] | — |
defaultValue | number | readonly [number, number] | — |
onValueChange | (value: SliderValue) => void | — |
onValueCommit | (value: SliderValue) => void | — |
min | number | 0 |
max | number | 100 |
step | number | 1 (0 is continuous) |
disabled | boolean | false |
invalid | boolean | false |
orientation | "horizontal" | "vertical" | "horizontal" |
label | string | — |
description | string | — |
formatValue | (value: number) => string | String(value) |
className | string | — |
testId | string | — |
style | StyleDesc | — |
ref / aria-id / onLayout | host props | — |
Edit this page on GitHubpackages/components/docs/slider.mdx