# Pan Control

> Left and right balance with a fill from the centre and a centre detent.

<ComponentPreview name="pan-control-demo" />

## Installation

```npm
npx shadcn-svelte@latest add @audiocn-svelte/pan-control
```

## Usage

```svelte
<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](/docs/components/knob) with `min={-1}`, `max={1}`, `origin={0}`, `format={formatPan}`, and `parse={parsePan}`:

<ComponentPreview name="pan-control-knob" />

## 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

<PropsTable
	rows={[
		["value", "number", "0", "−1 to 1. Bindable."],
		["onValueChange", "(value) => void", null, null],
		["onValueCommit", "(value) => void", null, null],
		["step", "number", "0.05", null],
		["largeStep", "number", "0.25", null],
		["detent", "boolean", "true", "Snap to the centre while dragging near it."],
		["format", "(value: number) => string", "formatPan", null],
		["size", '"sm" | "default" | "lg"', '"default"', null],
		["disabled", "boolean", "false", null],
	]}
/>