Skip to content

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

Free

Volume Control Slider for Svelte

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

UI library: Ark UI

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 Svelte, Ark UI does not draw the speaker.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

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

Usage

<div class="flex w-full max-w-md flex-col gap-2"><div class="flex items-center justify-between"><div class="flex items-center gap-2"><Volume2Icon aria-hidden="true" class="size-4" /><Label>Volume</Label></div><span class="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