Skip to content

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

Free

Volume Control Style Slider for Vue

A vertical Volume slider at 60%, with the label centered above the track and the percentage centered below it.

UI library: Ark UI

Volume, a vertical track, and 60% are stacked and centered. There is no icon and no scale beside the track.

Use it in a mixer, with several faders in a row. A Switch covers mute when there is no level to set. In Vue, Ark UI does not center that column.

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 flex-col items-center gap-4">
  <Label>Volume</Label>
  <div class="h-48">
    <Slider
      :aria-label='["Volume"]'
      @value-change="handleValueChange"
      orientation="vertical"
      :value="value"
    />
  </div>
  <span class="text-muted-foreground text-sm tabular-nums">{{ value[0] }}%</span>
</div>

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. The Vue file binds :value and listens to @value-change, which receives details.value.

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 Ark UI, aria-label is a list with one name per thumb.

Which keys move it?

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

API Reference

Label

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

Slider

Sets aria-label="[Volume]", value-change="handleValueChange", orientation="vertical" and value="value". The rest is on the Slider page.

All 29 slider examples