Volume Control

Installation

$ pnpm dlx shadcn-svelte@latest add https://juddisjudd.github.io/audiocn-svelte/r/volume-control.json

$ npx shadcn-svelte@latest add https://juddisjudd.github.io/audiocn-svelte/r/volume-control.json

$ yarn dlx shadcn-svelte@latest add https://juddisjudd.github.io/audiocn-svelte/r/volume-control.json

$ bunx --bun shadcn-svelte@latest add https://juddisjudd.github.io/audiocn-svelte/r/volume-control.json

Usage

<script lang="ts">
	import { VolumeControl } from "#lib/components/ui/volume-control/index.js";

	let volume = $state(1);
	let muted = $state(false);
</script>

<VolumeControl bind:value={volume} bind:muted />

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.

Anatomy

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

Examples

In a popover

Theming

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 reference