Slider
Single-handle and range sliders. Aligned with J&J DS v1.2 (Figma 13647:47690). Backed by Radix Slider — supports keyboard nav, step, min/max, and the standard aria-valuetext output.
Single value
Value: 35
Show sourceHide source
const [v, setV] = useState([35]);
<Slider value={v} onValueChange={setV} max={100} />Range
Pass an array with two values to render two thumbs.
Range: 20 – 70
Show sourceHide source
<Slider value={[20, 70]} onValueChange={setR} max={100} />With Field — label + helper + error
0–100
Value out of range
Show sourceHide source
<Field label="Threshold" status="error" message="Out of range">
<Slider defaultValue={[140]} max={100} />
</Field>Stepped (with tick marks via step)
Use `step` to constrain values to discrete increments.
Step = 20, snaps to 0 / 20 / 40 / 60 / 80 / 100.
Show sourceHide source
<Slider defaultValue={[40]} max={100} step={20} />Disabled
Show sourceHide source
<Slider defaultValue={[40]} max={100} disabled />