Primitives
Slider
A value on a track, by click, drag or keyboard
Usage
import { Slider, Stack, Text } from "@gpuixui/primitives";
import { useState } from "react";
const [quality, setQuality] = useState(62);
<Stack direction="column" gap="sm">
<Text role="caption" tone="muted">Quality · {quality}%</Text>
<Slider
label="Quality"
value={quality}
onValueChange={setQuality}
formatValue={(value) => `${value}%`}
/>
</Stack>;API
| Prop | Type | Default | Consequence |
|---|---|---|---|
value | number | — | controlled value |
defaultValue | number | min | uncontrolled start |
onValueChange | (value: number) => void | — | called only when the value changed |
onValueCommit | (value: number) => void | — | the value a gesture ended on: once per drag release, once per key that moved it |
onChange | (value: number) => void | — | deprecated alias for onValueChange |
min / max | number | 0 / 100 | the closed range; a stored bound that is not a number is that default |
step | number | 1 | quantisation; 0 is continuous; a stored step that is not a number is 1 |
size | "sm" | "md" | "lg" | "md" | thumb iconSize, track density.controlHeight |
disabled | boolean | false | out of the tab order, half opacity |
invalid | boolean | false | the destructive role on the fill and thumb border |
label | string | none | accessible name |
description | string | none | announced help |
formatValue | (value: number) => string | String | the announced text; a blank answer keeps the number |
orientation | "horizontal" | "vertical" | "horizontal" | the axis the value runs along; a vertical track needs a definite height |
style | StateStyle<SliderState> | — | resolved against the live state, merged last on the track |
className | string | — | joined after the recipe, so it wins conflicts |
children | ReactNode | — | the parts to draw; omit for the default composition |
onClick / onKeyDown / onKeyUp / onFocus / onBlur | host handlers | none | composed with the slider's own; the press and keys reach the track |
ref / aria-id / onLayout | host props | none | land on the track, the element that carries the pointer and the value |
testId | string | — | stable locator for the track |
Edit this page on GitHubpackages/primitives/docs/slider.mdx