Picks a number or a range by dragging along a track, with steps, marks and a value readout.
Slider takes one value or a [low, high] range (two thumbs that never cross). The chosen span is drawn in the accent gradient over a recessed track. step snaps every value, marks draw labelled ticks, and showValue prints the formatted value beside the label.
Use it where the exact number matters less than its position in a range (volume, a price filter, a threshold). When the exact number matters, pair it with a TextInput or use the input alone.
Installation
npx shadcn@latest add KezLahd/rime/sliderAlso installs: base, field.
Usage
import { Slider } from "@/components/ui";
<Slider label="Volume" value={volume} onValueChange={setVolume} showValue formatValue={(n) => `${n}%`} />Examples
Single value
Range with marks
Step and disabled
API
Generated from the component's TypeScript types and JSDoc (scripts/gen-ui-registry.mjs), so it always matches the source.
Slider
| Prop | Type | Default | Description |
|---|---|---|---|
| min | number | 0 | |
| max | number | 100 | |
| step | number | 1 | |
| largeStep | number | PageUp and PageDown move by this much. Defaults to a tenth of the range, rounded to the step. | |
| marks | ReadonlyArray<{ value: number; label?: string }> | Ticks under the track, optionally labelled: [{ value: 0, label: "0" }, { value: 50 }]. | |
| formatValue | (value: number) => string | (v: number) => String(v) | Formats the value for aria-valuetext and the value readout: (v) => `${v}%`. |
| showValue | boolean | Shows the formatted value (or range) to the right of the label row. | |
| label | string | Visible label above the track. Without it, pass aria-label. | |
| aria-label | string | ||
| disabled | boolean | ||
| name | string | Posts the value (a range posts two inputs, name[0] and name[1]). | |
| className | string | ||
| valueRequired | number | readonly [number, number] | One thumb. | |
| onValueChangeRequired | (value: number) => void | (value: [number, number]) => void |
Theme tokens
Per-component tokens are undeclared by default, so the default shown is the fallback the CSS uses. Set one at :root (or in theme.css) to restyle every instance. Live values are read from this page, so they follow the Rime Studio.
| Token | Default | Live value |
|---|---|---|
| --slider-fill | var(--brand-gradient) | … |
| --slider-thumb-bg | var(--surface-solid) | … |
| --slider-thumb-size | 18px | … |
| --slider-track-bg | var(--recess-fill-hover) | … |
| --slider-track-h | 6px | … |
System tokens it reads
| Token | Default | Live value |
|---|---|---|
| --brand | tokens.css | … |
| --brand-gradient | tokens.css | … |
| --dur | tokens.css | … |
| --ease | tokens.css | … |
| --focus-ring | tokens.css | … |
| --ink-disabled | tokens.css | … |
| --ink-heading | tokens.css | … |
| --ink-muted | tokens.css | … |
| --ink-secondary | tokens.css | … |
| --line-input | tokens.css | … |
| --r-full | tokens.css | … |
| --recess-fill-hover | tokens.css | … |
| --rgb-contact | tokens.css | … |
| --surface-solid | tokens.css | … |
| --text-caption | tokens.css | … |
| --text-small | tokens.css | … |
Accessibility
- Each thumb is role="slider" with aria-valuemin, aria-valuemax, aria-valuenow and aria-valuetext (from formatValue), named by the label; range thumbs are named "minimum" and "maximum".
- Keyboard: arrows step, PageUp and PageDown take a large step (a tenth of the range by default), Home and End jump to the ends.
- Pressing anywhere on the track moves the nearest thumb there and focuses it.
Do and don't
Do
- Format values in the unit people think in ("$500", "60%").
- Use marks for meaningful stops only.
Don't
- Don't use a slider for a value that must be exact; offer a text field too.
- Don't hide the current value when it matters; turn on showValue.
For AI agents
This page as markdown, rendered from the same registry entry. Point an agent at it (or add .md to this page's URL), or at /llms.txt for the index.
Open slider.mdRelated: meter, text-input