Slider
A slider with a live value, a bubble over the thumb while it moves, formatted values, ranges and marks that fill.
Installation
npx shadcn@latest add @quireui/sliderUsage
<Slider label="Late fee" defaultValue={2.5} min={0} max={10} step={0.5} format={(v) => `${v}%`} />With a label, the value shows above the track and follows the thumb live, in tabular numbers so it does not jitter. format decides how it reads: money, a percentage, or "7 days late".
Smooth steps
With a coarse step, a thumb that jumps from step to step lurches under a finger that moves smoothly. So by default the thumb follows the pointer exactly while it is dragged, and glides onto the nearest step when you let go, as if it clicks into place. The value above the track, and the value you get in onValueChange, are always whole steps; only the drawing is smooth. The keyboard still moves one step per press, instantly.
snap="live" jumps from step to step while dragging instead, for the rare slider where every step should be felt.
Compact
Without a label, as in a zoom control, there is no value above the track. Instead a bubble over the thumb shows the exact value while it is dragged or moved from the keyboard, where your eyes already are. The value is only ever in one place, so the two never overlap. Give it an aria-label.
Ranges
Pass two values for a range with two thumbs. The value above the track reads as "from – to".
Marks
marks puts points on the track, with labels underneath. A mark fills once the value passes it, so you can see at a glance which of the common choices you are past. The first and last labels line up with the ends instead of hanging off them.
Accessibility
Each thumb is a native range input, so screen readers hear the label, the value and the range, and a range slider has one input per thumb. The visible bubble is a visual echo of that value and is hidden from them.
| Key | Action |
|---|---|
| ← / → or ↓ / ↑ | Moves by one step. |
| Shift + arrow / Page Up / Page Down | Moves by a large step. |
| Home / End | Goes to the minimum or maximum. |
Motion
The thumb grows slightly on hover and while it is dragged, and on a compact slider the bubble fades in; from the keyboard both are instant. Let go between steps and the thumb glides onto the nearest one in 160ms. Under reduced motion it lands there directly. The thumb itself follows the pointer with no delay.
Slider or something else?
- An exact number someone will type, like an amount on an invoice: an Input.
- A choice between a few named options: Toggle group.
API reference
Slider
A value picked along a track. The value shows above it, or, on a compact slider with no label, in a bubble over the thumb while it moves. Marks can fill as the range passes them.
Prop
Type
Also takes every prop of Base UI's Slider.Root. Style it with [data-slot="slider"].