Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Basic Range Slider for React

A Select Range slider with two thumbs starting at 25 and 75, and the track filled between them.

Select Range sits above one track with two thumbs. They start at 25 and 75, and the stretch between them is filled.

Use it for a price, age, or time span where both ends are the choice. A single figure is clearer in a Number Input. In React, Base UI keeps the thumbs in order.

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

Anatomy

Slider anatomy: root, label, value, track, range, thumb

Usage

<div className="flex w-full max-w-md flex-col gap-2">
  <Label>Select Range</Label>
  <Slider aria-label="Range" defaultValue={[25, 75]} max={100} min={0} />
</div>

FAQ

How does this demo get two thumbs?

The default value is [25, 75], two numbers, so the slider draws one thumb for each. The thumbs keep their order as they move.

What range does it cover?

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

Can the thumbs meet?

Yes. No minimum gap is set, so both thumbs can sit on the same value. minStepsBetweenValues keeps them apart.

How are the thumbs named?

The Select Range text is a visible Label, and aria-label names the slider. On Base UI, aria-label is one string, Range.

How do I read the two ends?

The slider keeps its own value here. Make it controlled to read value[0] and value[1], as the Price Range example does.

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.

API Reference

Label

No extra props in this demo. The rest is on the Label page.

Slider

Sets aria-label="Range", defaultValue={[25, 75]}, max={100} and min={0}. The rest is on the Slider page.

All 29 slider examples