# XWUIKnob

A circular dial control for a numeric value - the rotary counterpart to XWUISlider, useful for volume, gain, or other bounded settings. Drag vertically or use arrow keys to change the value within `min`/`max` by `step`; the conic-gradient fill sweeps up to 270°. Set the diameter with `size`, toggle the centre readout with `showValue`, and mark it `disabled` or `readOnly`. Read or set the value via `getValue()` / `setValue()` and subscribe with `onChange(handler)`.

## Usage

```ts
import { XWUIKnob } from './XWUIKnob';

const knob = new XWUIKnob(
  container,
  { value: 40 },
  { min: 0, max: 100, step: 5, size: 96, showValue: true }
);

knob.onChange((value) => console.log('knob', value));
```

## Basic Usage

A circular dial control bound to a numeric value.

```example
file: examples/BasicUsage.ts
html: examples/BasicUsage.html
title: Basic Usage
description: A circular dial control bound to a numeric value.
```

## Mixer Bank

Three labelled knobs acting as gain, treble, and bass controls, each mounted in its own host element.

```example
file: examples/MixerBank.ts
html: examples/MixerBank.html
title: Mixer Bank
description: Three labelled knobs acting as gain, treble, and bass controls, each mounted in its own host element.
```

## Read-Only Gauge

A non-interactive knob used as a display gauge for a current load value.

```example
file: examples/ReadOnlyGauge.ts
html: examples/ReadOnlyGauge.html
title: Read-Only Gauge
description: A non-interactive knob used as a display gauge for a current load value.
```

```api
```