Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Slider examples · Standard

Slider with Min/Max Labels for React

A Size slider with its minimum and maximum written under each end of the track.

Framework
UI library

Numbers under the ends tell people the scale before they drag. 0 sits under the start and 100 under the end, in small muted text. Use it when the range is not obvious from the label.

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 are the end labels placed?

A flex items-center justify-between row under the slider, with 0 and 100 in text-xs muted text. They are plain text, so they don't change with min and max.

What range does it cover?

0 to 100. Keep the labels in step with the slider's range when you change it. min and max set the ends.

Where does it start?

At 50, from defaultValue. The slider keeps its own value.

How is the slider named?

The Size text is a visible Label, and the slider gets the same name with aria-label, so screen readers announce what it sets. On Base UI, aria-label is one string on the slider.

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.

Do the labels line up with the ends?

Yes. The labels row is in the same w-full max-w-md column as the slider, so justify-between puts 0 under the start and 100 under the end.

All 29 slider examples