Skip to content

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

Free

Volume Control Style Slider for Ark UI

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

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 React, Ark UI does not center that column.

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 flex-col items-center gap-4">
  <Label>Volume</Label>
  <div className="h-48">
    <Slider
      aria-label={["Volume"]}
      onValueChange={handleValueChange}
      orientation="vertical"
      value={value}
    />
  </div>
  <span className="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. onValueChange receives details.value, the new 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 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"]}, onValueChange={handleValueChange}, orientation="vertical" and value={value}. The rest is on the Slider page.

All 29 slider examples