Slider
Pick a value (or a range) from a track, wrapping the Base UI Slider. Keyboard stepping and pointer dragging come from the foundation.
Playground
Every control maps to a prop. The Code tab always shows the markup for exactly what you've configured.
Variants
One thumb or two: a number is a single value, an array is a range with a thumb per entry. Same track, same keys, no separate range component.
States
Dragging tracks the pointer with zero lag on purpose; position is never animated. Disabled dims the whole control and keeps the pointer out.
Styling states
The root carries data-disabled and thumbs carry data-dragging while held, so custom styling never needs JavaScript:
.ub-slider-thumb[data-dragging] {
border-color: var(--ub-accent);
}Props
Everything the Base UI Slider root accepts (min, max, step, largeStep, orientation, ...), plus:
| Prop | Type | Default | Description |
|---|---|---|---|
defaultValue | number | number[] | – | Initial value; an array renders a thumb per entry (range). |
value | number | number[] | – | Controlled value. Pair with onValueChange. |
onValueChange | (value) => void | – | Called continuously while sliding; onValueCommitted fires on release. |
min / max / step | number | 0 / 100 / 1 | The range and the arrow-key increment. |
largeStep | number | 10 | The Page Up and Page Down increment. |
orientation | "horizontal" | "vertical" | "horizontal" | Track direction; keyboard mapping follows. |
onValueCommitted | (value) => void | – | Fires once when the drag or key press ends, for saving without spamming updates. |
aria-label | string | – | Accessible name for the thumb; ranges suffix it with the index. |
disabled | boolean | false | Blocks interaction and dims the control. |
Agent instructions
Working with a coding agent? Paste this into its context, or point it at llms.txt for the whole library.
Slider, from @usebones/react.
- One component; track, indicator, and thumbs render automatically. min, max, step, largeStep, orientation, defaultValue, value + onValueChange, onValueCommitted, and disabled pass through.
- An array value ([20, 60]) renders a range with a thumb per entry.
- Always pass aria-label (ranges suffix it per thumb), or wrap in a Field with a FieldLabel.
- Restyle in CSS via .ub-slider-track, .ub-slider-indicator, .ub-slider-thumb, [data-dragging], [data-disabled]. Never animate thumb position. Tokens only.