Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Slider examples · Range

Range with Value Display Slider for React

A two-thumb slider with the selected range written beside its label.

Framework
UI library

The range reads at a glance without looking under the track. The two values sit beside the Range label in one row. Use it where vertical space is tight.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

FAQ

How does the readout follow the thumb?

The value lives in state, starting at [30, 70], and goes back to the slider as value. The text beside the label prints both values with a dash between them. onValueChange receives the new value, and the handler stores it as an array.

How is the row laid out?

flex items-center justify-between: the label at the start, the values at the end in muted tabular-nums text.

What range does it cover?

0 to 100 in steps of 1. min and max set the ends.

How are the thumbs named?

Range is a visible Label. On Base UI, aria-label names the slider Range.

Can I move it from the keyboard?

Yes. The thumb takes focus with Tab. The arrow keys move it by one step, Page Up and Page Down by a larger step, and Home and End jump to the ends.

When should I save the range?

The change callback runs on every step while the thumb moves. Save or fetch from the end-of-change callback, which runs once when dragging stops. On Base UI it is onValueCommitted.

All 29 slider examples