Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Slider examples · Interactive

With Preset Values Slider for React

A Level slider with buttons under it that jump to 0, 25, 50, 75 or 100.

Framework
UI library

Presets get people to common values in one click, and the slider handles the rest. Five small outline buttons sit under the track. Use it for levels where a few values come up again and again.

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 do the buttons set the value?

Each button carries its preset as its value, and one shared handler reads it and stores it.

How does the readout follow the thumb?

The value lives in state, starting at 50, and goes back to the slider as value. The number beside the label prints it. onValueChange receives the new value, and the handler stores it as an array.

How are the buttons laid out?

A flex gap-2 row with flex-1 on each, so the five share the width equally.

Where do the presets come from?

A presets array at the top of the file: 0, 25, 50, 75 and 100.

How is the slider named?

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

All 29 slider examples