Elastic Slider
Sliders
Source and install need .
pnpm dlx shadcn@latest add @assembli/sliderSlider
The everyday slider: a soft track, a white knob with a real shadow and a halo on hover, and a value bubble that rises over the thumb you're dragging. One thumb or a range, a formatted readout in the label row, ticks that light up inside the fill, mark labels you can click to jump to, and icons at either end. Built on Base UI, with arrows, Page Up/Down, Home/End, form submission and aria-valuetext.
- Dependencies
- @base-ui/react(npm, opens in a new tab)
Props
Other props pass through to the root element.
value
Value
A number for one thumb, an array for a range (one thumb per entry).
defaultValue
Value
onValueChange
(value: Value) => void
label
React.ReactNode
showValue
boolean
Shows the formatted value at the end of the label row.
formatValue
(value: number) => string
Turns a number into text for the header, the bubble over the thumb and
aria-valuetext. Defaults toformat.marks
SliderMark[]
Points along the track. Ticks sit on the track; labelled ones print underneath and jump there when clicked.
tooltip
"hover" | "always" | "never"
Default
"hover"hovershows a value bubble over the thumb on hover, focus and drag;alwayskeeps it up;neverhides it.startAdornment
React.ReactNode
An icon or text before the track, such as a quiet speaker.
endAdornment
React.ReactNode
An icon or text after the track, such as a loud speaker.
thumbLabels
string[]
One accessible name per thumb, for ranges. Defaults to "Minimum" and "Maximum".
className
string
| Prop | Type | Default | Description |
|---|---|---|---|
| value | Value | – | A number for one thumb, an array for a range (one thumb per entry). |
| defaultValue | Value | – | |
| onValueChange | (value: Value) => void | – | |
| label | React.ReactNode | – | |
| showValue | boolean | – | Shows the formatted value at the end of the label row. |
| formatValue | (value: number) => string | – | Turns a number into text for the header, the bubble over the thumb and aria-valuetext. Defaults to format. |
| marks | SliderMark[] | – | Points along the track. Ticks sit on the track; labelled ones print underneath and jump there when clicked. |
| tooltip | "hover" | "always" | "never" | "hover" | hover shows a value bubble over the thumb on hover, focus and drag; always keeps it up; never hides it. |
| startAdornment | React.ReactNode | – | An icon or text before the track, such as a quiet speaker. |
| endAdornment | React.ReactNode | – | An icon or text after the track, such as a loud speaker. |
| thumbLabels | string[] | – | One accessible name per thumb, for ranges. Defaults to "Minimum" and "Maximum". |
| className | string | – |
