Knob

A rotary dial input (role=slider).

import { BuiKnob } from 'ng-blatui';

<bui-knob [(value)]="level" [min]="0" [max]="100" label="Volume" />

Sizes

<!-- size="sm | default | lg" -->
<bui-knob [value]="30" size="sm" label="Bass" />
<bui-knob [value]="80" size="lg" label="Treble" />

<bui-knob [value]="6" [min]="0" [max]="11" [step]="1" label="Gain" />

Prop	Type	Default	Description
`min`	`number`	`0`	Minimum value at the start of the dial's sweep.
`max`	`number`	`100`	Maximum value at the end of the dial's sweep.
`step`	`number`	`1`	Increment applied per arrow key, scroll or drag snap.
`size`	`"default" \| "lg" \| "sm"`	`'default'`	Size preset controlling the knob's diameter and text size.
`label`	`string`	`'Value'`	Accessible label announced for the slider.

Bind with [(name)], or one-way as an input.

Prop	Type	Default	Description
`value`	`number`	`50`	Current value. Two-way bindable with `[(value)]`.
`disabled`	`boolean`	`false`	Whether the knob is disabled. Two-way bindable with `[(disabled)]`.

Every ng-blatui component also accepts a class input to merge extra Tailwind classes onto the host.