Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Slider examples · Standard

Slider with Label for React

A slider with a Volume label above the track.

Framework
UI library

A word above the track says what the slider sets. The Volume label sits over a slider that starts at 30. Use it in settings forms where each slider needs a name.

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 is the slider named?

The Volume 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.

Where does it start?

At 30, from defaultValue. The slider keeps its own value after that.

What range does it cover?

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

How are the label and slider laid out?

A flex flex-col gap-2 column, w-full max-w-md. The label is first, so it sits above the track.

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.

How do I show the number too?

Make the slider controlled and print the value beside the label. The With Value Display example does exactly that.

All 29 slider examples