Primitives
RangeSlider
Two values, the ends of one interval, on one track
Usage
import { RangeSlider, Stack, Text } from "@gpuixui/primitives";
import { useState } from "react";
const [price, setPrice] = useState<readonly [number, number]>([20, 80]);
<Stack direction="column" gap="sm">
<Text role="caption" tone="muted">${price[0]} – ${price[1]}</Text>
<RangeSlider
label="Budget"
value={price}
onValueChange={setPrice}
step={5}
formatValue={(value) => `$${value}`}
/>
</Stack>;API
| Prop | Type | Default | Consequence |
|---|---|---|---|
value | readonly [number, number] | — | controlled span |
defaultValue | readonly [number, number] | [min, max] | uncontrolled start |
onValueChange | (value: readonly [number, number]) => void | — | called with the ordered pair |
onValueCommit | (value: readonly [number, number]) => void | — | the span a gesture ended on: once per drag release, once per key that moved an end |
onChange | (value: readonly [number, 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 and track metrics |
disabled | boolean | false | both thumbs leave the tab order |
invalid | boolean | false | destructive fill and thumb borders |
label | string | none | group name; thumbs become the provider's rangeEnd sentence ("<label> minimum" / "<label> maximum") |
description | string | none | announced help on the group node |
formatValue | (value: number) => string | String | the announced text of each thumb; a blank answer keeps the number |
orientation | "horizontal" | "vertical" | "horizontal" | the axis the two values run 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 range's own; keys land on a thumb |
ref / aria-id | host props | none | land on the thumb that holds the tab stop — the end the reader last used, the start while neither holds focus — because the group node cannot take focus; the address moves with the reader |
onLayout | (event: EventPayload) => void | none | the painted box of the thumb holding the tab stop — a thumb's, never the track's — reported on mount and again when the address moves; wrap the slider to measure the whole control |
testId | string | — | stable locator for the track |
Edit this page on GitHubpackages/primitives/docs/range-slider.mdx