Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Slider examples · Vertical

Vertical Range Slider for React

A vertical two-thumb slider with the selected range written under it.

Framework
UI library

A range picked top to bottom. Two thumbs on a vertical track, with the upper value over the lower one in the reading below. Use it beside a chart or a tall preview.

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 it made vertical?

orientation="vertical", inside a h-56 box that sets its length.

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 reading prints the higher value above the lower one. onValueChange receives the new value, and the handler stores it as an array.

Which thumb is which?

The first value is the lower thumb, near the bottom, and the second the upper one.

How are the thumbs named?

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

What range does it cover?

0 to 100. min and max set the ends.

Which keys move the thumbs?

Up and Right raise the focused thumb, Down and Left lower it, and Home and End jump to the ends.

All 29 slider examples