## Volume Knob (S—049)

A rotary dial with glowing tick marks; drag up or down, or use the arrow keys.

- URL: https://sundaeui.dev/components/volume-knob
- Category: Forms & inputs · Art direction: Futuristic
- Access: Free (no account needed)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/volume-knob.json`
- Tags: form, knob, dial, audio, range, slider

A 270° dial with a ring of ticks that light as the value rises and a big readout in the middle.
Dragging vertically is easier than tracing a circle, so that is how it works; keys step by 1 or 10.

### Usage

```tsx
import { VolumeKnob } from '@/components/sundae/volume-knob'

<VolumeKnob label="Master volume" defaultValue={64} onValueChange={setVolume} />
```

### Props

- `value / defaultValue` (`number`, default `64`): 0–100.
- `onValueChange` (`(v: number) => void`): Called on change.
- `label` (`string`, default `'Volume'`): Accessible name and caption.
- `ticks` (`number`, default `28`): Tick marks around the dial.
- `color` (`string`, default `'#a3e635'`): Lit tick colour.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Audio, synth and creative-tool controls.
- Any 0–100 setting that benefits from a tactile, compact control.

### When not to use

- Forms where a plain range input is expected.

### Accessibility

- role="slider" with aria-valuenow and a percentage aria-valuetext.
- Visible focus ring around the dial.
- Reduced motion removes the knob easing.

### Keyboard

- ↑ / →: Up 1
- ↓ / ←: Down 1
- Page Up / Down: ±10
- Home / End: 0 / 100