Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Slider examples · Settings

Volume Control Slider for React

A Volume slider with a speaker icon and its percentage beside the label.

Framework
UI library

The familiar volume control: a speaker icon, a label and the level as a percentage. It starts at 65. Use it in media players and sound settings.

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 does the readout follow the thumb?

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

Is the speaker icon announced?

No. It has aria-hidden="true"; the Volume label and the slider's aria-label name the control.

What range does it cover?

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

How do I add a mute button?

Put a Button with the icon before the slider and set the value to 0 on click, keeping the last level to restore. The demo has no mute.

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.

When should I save the volume?

The change callback runs on every step while the thumb moves. Save or fetch from the end-of-change callback, which runs once when dragging stops. On Base UI it is onValueCommitted.

All 29 slider examples