Knob

import { WrKnob } from 'ngwr/knob';

@Component({ imports: [WrKnob] })
export class MyComponent {}

<wr-knob [(value)]="value" [min]="0" [max]="100" suffix="%" />

70%

Name	Description	Type	Default
`ariaLabel`	Accessible name — the role needs one. Falls back to `knob.label`.	`string \| null`	`null`
`min`	Minimum allowed value.	`number \| undefined`	`0`
`max`	Maximum allowed value.	`number \| undefined`	`100`
`step`	Step granularity.	`number`	`1`
`size`	Dial diameter in CSS pixels.	`number`	`120`
`strokeWidth`	Stroke width of the dial arc, in CSS pixels.	`number`	`8`
`trackColor`	Track (unfilled) color.	`string`	`rgba(--wr-color-light, 0.6)`
`valueColor`	Filled-arc color.	`string`	`var(--wr-color-primary)`
`showValue`	Show the value text in the center.	`boolean`	`true`
`suffix`	Optional suffix appended to the center text (e.g. `'%'`).	`string`	`''`
`readonly`	Read-only — disables interaction but keeps the visual.	`boolean`	`false`
`disabled`	Disable interaction.	`boolean`	`false`
`value`	Bound by `[formField]`, or two-way via `[(value)]`.	`number`	`0`
`(touch)`	Emitted on blur so a bound field can mark itself touched.	`void`	—

Installation