Slider

Range slider. Free, MIT · Forms and input › Checkboxes and sliders

Single-value or range slider. aria-label / aria-labelledby / aria-describedby are applied to the thumbs. Each thumb holds a visually hidden native <input type="range">, as React Aria's does: it is what takes focus, so VoiceOver on iOS and TalkBack can change the value with their swipe gestures (they do not adjust an ARIA slider), and the keys below keep the behaviour the same on every platform.

Installation

npx valyro-cli@latest add slider

npx shadcn@latest add https://valyro.xyz/r/slider.json

npm install valyro-ui

import 'valyro-ui/styles.css';
import { Slider } from 'valyro-ui';

Props

Prop	Type	Default
`value`	`T`		A number for one thumb, a `[from, to]` tuple for a range.
`defaultValue`	`T`		Initial `value` when uncontrolled.
`onValueChange`	`(value: SliderWiden<T>) => void`		Called with the new `value` when it changes.
`min`	`number`	`0`	Lowest value, at the start of the track; steps are counted from it.
`max`	`number`	`100`	Highest value, at the end of the track.
`step`	`number`	`1`	Snapping interval; 0 = continuous.
`marks`	`SliderMark[]`		Ticks on the track, with optional labels below it.
`tooltip`	`boolean \| 'always'`	`false`	Value bubble over the thumb: `true` while hovered/focused/dragged, `'always'` permanently.
`formatValue`	`(value: number) => string`		Text for the bubble and aria-valuetext. Default: the number formatted for `locale`.
`locale`	`string`		Locale for the default `formatValue` (default: the ThemeProvider's, then the browser's).
`thumbLabels`	`[string, string]`		Words appended to the accessible name of each range thumb, e.g. "Price minimum".
`disabled`	`boolean`	`false`	Ignores pointer and keyboard input, takes the thumbs out of Tab order and leaves the value out of form data.
`name`	`string`		Submits the value(s) with the surrounding form through hidden inputs.
`invalid`	`boolean`	`false`	Error state, e.g. from a FormField: aria-invalid on the thumbs (an explicit `aria-invalid` wins).

Related components

Checkbox — Checkboxes
Checkbox Group — Checkboxes under one label, hint, error and requirement
Radio Group — Pick exactly one option
Switch — On/off toggle
Histogram Range — Price range with a histogram, two thumbs and inputs
Rating Input — Star rating
Text Input — Text fields
Textarea — Multiline text input
Search Input — Search field
Mentions Input — Text with @mentions and #tags, async suggestions
Tags Input — Tag entry
Select — Pick one option from a list

Previous: Switch · Next: Histogram Range · All Forms and input