Pan Control

Installation

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

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

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

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

Usage

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

	let pan = $state(0);
</script>

<PanControl bind:value={pan} />

The value runs from −1 (left) to 1 (right). Dragging near the centre snaps to it, and double-clicking returns to it. formatPan turns a value into "L30", "C" or "R30", and parsePan reads that text back.

For a rotary pan, use a Knob with min={-1}, max={1}, origin={0}, format={formatPan}, and parse={parsePan}:

Accessibility

The thumb is a slider named "Pan", with aria-valuetext such as "30% left" or "Center". The knob example uses describePan for the same text on its dial, while formatPan keeps the visible value short. Both support arrow keys, Page Up, Page Down, Home and End.

API reference