Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Volume Control Slider for Ark UI

A Volume slider at 65% with a speaker icon before the label and the percentage on the same row.

A speaker icon, the word Volume, and 65% share one row. A single thumb sits on the track underneath.

Use it in a media player or in sound settings. A mute Button helps when silence should be one click. In React, Ark UI does not draw the speaker.

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

Anatomy

Slider anatomy: root, label, value, track, range, thumb

Usage

<div className="flex w-full max-w-md flex-col gap-2">
  <div className="flex items-center justify-between">
    <div className="flex items-center gap-2">
      <Volume2Icon aria-hidden="true" className="size-4" />
      <Label>Volume</Label>
    </div>
    <span className="text-muted-foreground text-sm tabular-nums">
      {value[0]}%
    </span>
  </div>
  <Slider
    aria-label={["Volume"]}
    onValueChange={handleValueChange}
    value={value}
  />
</div>

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 details.value, the new 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 Ark UI it is onValueChangeEnd.

API Reference

Label

No extra props in this demo. The rest is on the Label page.

Slider

Sets aria-label={["Volume"]}, onValueChange={handleValueChange} and value={value}. The rest is on the Slider page.

All 29 slider examples