elements
Manual UI Templates Slider

Slider

elements man ui/templates/slider

Pick a value or a range by dragging thumbs along a track, with full keyboard support.

Example
import { Slider, SliderValue } from "@elements/ui/slider";

<Slider value={form.volume} label="Volume" />
<Slider value={filters.price} max={500} step={10} minStepsBetweenThumbs={2} name="price" />
<Slider value={eq.bass} orientation="vertical" label="Bass" />

Parts

Part What it is
.slider The root, role=group.
.slider-control The pressable area around the track.
.slider-track The full range.
.slider-range The filled part, from min or between the outer thumbs.
.slider-thumb One per value, drawn.
.slider-thumb-input The range input inside each thumb: the focusable slider, unseen. Assistive tech sets it like any range input (reason input-change).
.slider-mark A tick inside the track at one of marks, aria-hidden.
.slider-mark-labels The row of mark labels, aria-hidden.
.slider-value SliderValue: the value as text in an output element.
.slider-input Hidden inputs that carry the values to a form and a Field; they fire input on a change and change on a commit.

Attributes

Attribute Type Default Description
value number[] (two-way) [0] One number per thumb: [50] is one thumb, [20, 80] a range.
min number 0 The lowest value.
max number 100 The highest value.
step number 1 Values snap to multiples of step from min.
largeStep number 0 PageUp, PageDown and Shift+arrow amount. 0 means ten steps.
minStepsBetweenThumbs number 0 The smallest gap between two thumbs, in steps.
orientation "horizontal" | "vertical" "horizontal" Track direction. A vertical slider fills its container's height.
dir "ltr" | "rtl" | "" "" Reading direction; empty follows the page. Under rtl the slider runs right to left.
inverted boolean false Runs from max to min.
disabled boolean false Not interactive; thumbs leave the tab order.
disabledThumbs number[] [] Indexes of thumbs that cannot move.
marks number[] [] Values to draw a tick at inside the track. Pair with step to snap to them.
markLabels boolean false Prints each mark's formatted value under the track.
invalid boolean false Marks the thumbs aria-invalid and draws the danger color.
thumbAlignment "center" | "edge" "center" edge keeps the thumbs inside the track at min and max.
thumbCollisionBehavior "push" | "swap" | "none" "push" What a dragged thumb does when it meets another: push it, pass it, or stop.
name string "" Submits each value with the form; name[] for several.
form string "" The id of the form the values belong to.
label string "" Accessible name for the thumbs. A range adds minimum and maximum.
getAriaLabel ((index: number) => string) | null null Accessible name per thumb.
getAriaValueText ((formatted: string, value: number, index: number) => string) | null null What a screen reader says for a value.
format Intl.NumberFormatOptions {} Formats the spoken value (percent, currency, units).
locale string "" Locale for format; empty uses the browser's.
class string "" Extra classes on the root.
attrs Record<string, string | number | boolean | undefined> {} Attributes for the root: id, data-*.
onValueChange (value: number[], details: SliderChangeDetails) => void () => {} Each change from a press, drag, key or assistive tech setting the range input. details.reason (track-press, drag, keyboard, input-change), details.activeThumbIndex, details.cancel().
onValueCommit (value: number[], details: SliderCommitDetails) => void () => {} When a drag ends or a key moves a thumb, if the value changed.

Keyboard

Keys Action
ArrowRight / ArrowUp Increase by step. ArrowRight decreases under rtl or inverted.
ArrowLeft / ArrowDown Decrease by step.
Shift + Arrow Change by the large step.
PageUp / PageDown Increase or decrease by the large step.
Home / End The lowest or highest value the thumb may take.
Tab Moves between thumbs.

Data attributes

Attribute Values On
data-orientation "horizontal" | "vertical" root, control, track, range, thumb, SliderValue (with htmlFor)
data-disabled present when disabled root, control, track, range, thumb
data-dragging present while dragging root, control, track, range, thumb, SliderValue (with htmlFor)
data-in-range present when the range covers the mark mark
data-invalid present when invalid root, control, track, range, thumb
data-focused, data-touched, data-valid inside a Field, mirror the Field's state root
data-dirty inside a Field, present while the values differ from the first ones root
data-thumb-alignment "center" | "edge" root
data-index the thumb's index thumb
data-active present on the thumb last moved or focused thumb

Accessibility

  • Each thumb holds a native range input (role slider) with aria-valuenow, aria-valuemin, aria-valuemax and aria-orientation, and is a tab stop. A touch screen reader's swipe sets it like any range input.
  • In a range, a thumb's aria-valuemin and aria-valuemax are its neighbors' bounds, so a screen reader knows how far it can go (APG multi-thumb).
  • Unlabeled range thumbs are named Minimum and Maximum. Inside a Field, the field's label names the thumbs.
  • format or getAriaValueText gives the spoken value: "40%" or "$120" rather than a bare number.

See also