Volume Control

InstallationCopy Anchor Link

$ pnpm dlx shadcn@latest add @audiocn/volume-control

UsageCopy Anchor Link

import { VolumeControl } from "@/components/ui/volume-control";

<VolumeControl
  value={volume}
  onValueChange={setVolume}
  muted={muted}
  onMutedChange={setMuted}
/>

Unlike the mixer components, the volume here runs from 0 to 1, the same as HTMLMediaElement.volume. The perceptual curve gives the slider more travel at low volumes, where ears are most sensitive. Unmuting at zero restores the last audible volume.

AnatomyCopy Anchor Link

<VolumeControl>
  <VolumeControlMute />
  <VolumeControlSlider />
  <VolumeControlValue />
</VolumeControl>

ExamplesCopy Anchor Link

In a popoverCopy Anchor Link

ThemingCopy Anchor Link

The mute button has data-level of muted, low, medium or high, so icons can switch with CSS alone, as in the first example.

API referenceCopy Anchor Link