Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Slider examples · Vertical

Volume Control Style Slider for React

A vertical Volume slider with its label above and its percentage below.

Framework
UI library

A mixer-style fader. The vertical slider has its label above and the level below, all centered in one column. Use it in audio mixers or anywhere sliders stand side by side.

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-48 box that sets its length.

How does the readout follow the thumb?

The value lives in state, starting at 60, and goes back to the slider as value. The percentage under it prints it. onValueChange receives the new value, and the handler stores it as an array.

How is the column laid out?

flex flex-col items-center gap-4: label, slider, then the value.

How do I put several side by side?

Repeat the column in a flex gap-6 row, one per channel, each with its own state.

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.

Which keys move it?

Up and Right raise the volume, Down and Left lower it, and Home and End jump to 0 and 100.

All 29 slider examples