How to build an accessible Slider in React

Renders a native <input type="range"> so the slider role, value announcements, and full arrow/Home/End keyboard support come from the platform without custom ARIA.

When to use a Slider

• Selecting a value within a continuous or stepped numeric range where approximate adjustment is fine
• Settings like volume, brightness, or opacity where dragging gives instant feedback
• When the bounds (min/max) matter more than entering an exact figure

When not to use it

• A precise numeric value must be typed — use NumberInput
• Picking a discrete rating on a small scale where stars/icons read better — use RatingGroup

Keyboard interactions

Role slider, verified at WCAG 2.2-AA.

• ArrowLeft
• ArrowRight
• ArrowUp
• ArrowDown
• Home
• End

Common mistakes

Avoid: <Slider label="Price" min={0} max={1000000} />

Prefer: <NumberInput label="Price" />

A huge range makes a single value impossible to hit by dragging; type the exact number instead

Example

<Slider label="Volume" defaultValue={50} />

See the full Slider reference →