Pan Control

InstallationCopy Anchor Link

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

UsageCopy Anchor Link

import { PanControl } from "@/components/ui/pan-control";

<PanControl value={pan} onValueChange={setPan} />

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}.

AccessibilityCopy Anchor Link

The thumb is a slider named "Pan", with aria-valuetext such as "30% left" or "Center".

API referenceCopy Anchor Link