Loading…

Slider

Selects a value, or a range, from a continuous span.

Forms
1 file
1 npm package
Accessibility notes

Playground

Installation

One command and the file is in your project, or copy it in by hand.

$pnpm dlx @dowel-ui/cli add slider

npm packages installed: radix-ui.

Usage

Imported from your own path — the file is yours, so this is an import like any other.

app/page.tsxTSX

import { Slider } from "@/components/ui/slider";

Examples

Every example the tests run, live and operable, side by side.

Default
With Value
Range
Steps
Disabled
Vertical

API

Generated from the component's own types, so a prop cannot appear here without existing.

<Slider>

Prop	Type	Default
`thumbLabels` Accessible name per thumb, in order. A range slider is two independent `role="slider"` controls, and naming both of them "Price" tells a screen reader user nothing about which one they are on. Give them distinct names — "Minimum price", "Maximum price".	`string[]`	—
`thumbValueTexts` Spoken value per thumb, in order, for values whose raw number is not meaningful on its own — a price, a duration, a rating.	`string[]`	—

Every prop of Radix UI’s Slider.Root, plus className.

Accessibility

Each thumb is a role="slider" with arrow keys, Home/End and Page Up/Down. The name is forwarded onto the thumbs, since the root has no role — a range slider should name each thumb separately with thumbLabels. A development-only warning fires if a thumb would be unnamed. Pass aria-valuetext when the raw number is not meaningful on its own (a price, a duration). Show the current value on screen too — a slider is imprecise, so pair it with a numeric input when exactness matters.

Quality

Measured from the source and its tests at build time.

All scores

10/10

checks passed

Tested — passes
axe assertion — passes
Keyboard tested — passes
Storybook examples — passes
Accessibility documented — passes
Semantic tokens only — passes
Motion from tokens — passes
className merged — passes
Visible focus — passes
No fixed widths — passes

Prop

Type

Default

thumbLabels

Accessible name per thumb, in order. A range slider is two independent role="slider" controls, and naming both of them "Price" tells a screen reader user nothing about which one they are on. Give them distinct names — "Minimum price", "Maximum price".

string[]

—

thumbValueTexts

Spoken value per thumb, in order, for values whose raw number is not meaningful on its own — a price, a duration, a rating.

string[]

—