Slider
A marker stroke with a mustard sticker to grab. The thumb squishes into the paper when pressed and springs back on release; a native range input does the work underneath.
Client componentWCAG AA
import { Slider } from "@plop-ui/react";
<Slider label="Pencil pressure" defaultValue={40} showValue />
<Slider label="Radius" min={0} max={2} step={0.1}
value={radius} onValueChange={setRadius}
showValue formatValue={(v) => `${v}×`} />
<Slider label="Volume" defaultValue={60} disabled showValue />
// A colored marker fill, and ruler ticks at every step:
<Slider label="Spice" min={0} max={5} defaultValue={3} tone="tomato" ticks showValue />Change every prop live in the playground.
Props
| Prop | Type | Default | What it does |
|---|---|---|---|
| labelrequired | ReactNode | — | Visible label associated with the native range input. |
| defaultValue | number | the midpoint of min and max | Uncontrolled initial value. |
| formatValue | (value: number) => string | none | Format the displayed value and aria-valuetext, e.g. v => `${v}×`. |
| max | number | 100 | Highest value. |
| min | number | 0 | Lowest value. |
| onValueChange | (value: number) => void | none | Called with the new numeric value after the native onChange event. |
| seed | string | number | generated from useId | Stable imperfections, shared by server and client. |
| showValue | boolean | false | Display the value beside the label. |
| step | number | "any" | 1 | Step measured from min, or `any` for continuous values. |
| ticks | number | boolean | false | Ruler ticks under the track: `true` marks every step (or tenths past 20 steps), a number sets how many gaps. |
| tone | "ink" | "tomato" | "mustard" | "mint" | "periwinkle" | "bubblegum" | ink | Marker color of the filled part. |
| value | number | none | Controlled value. |
Also takes every attribute of <input type="range"> (298 more, e.g. onClick, className, aria-*).
Use it well
DoUse it for approximate adjustments like volume, pressure or corner radius. Give every slider a visible label; use formatValue to explain units.
Don'tUse a slider for precise data entry or implement a second keyboard interaction. The native range already handles arrows, Home and End.
Accessibility
- A native input type=range with an associated visible label. min, max and step define its values; the last step never exceeds max.
- Tab focuses the input. Arrow keys adjust it and Home/End reach the bounds using the browser's built-in behavior.
- formatValue sets aria-valuetext even when showValue is false. The visible value is decorative, avoiding duplicate live announcements.
- A 44px-high input supports pointer and touch dragging. Disabled sliders leave the tab order; name and form work with native forms.
- Ruler ticks and the fill color are decorative and hidden from screen readers; the value is announced by the native input.
- Surface text tokens keep labels readable in all light/dark surfaces. Reduced motion removes thumb transforms and transitions; forced colors restore the native range appearance.