import { Component } from '@angular/core';
import { WrKnob } from 'ngwr/knob';
@Component({ imports: [WrKnob] })
export class MyComponent {}Knob
Pick a number by turning a dial.
Installation
Import the class, and @use the entry point in your global styles: without it the component renders unstyled.
Basic
Bind a number with [(value)] or any Angular form.
<wr-knob [(value)]="value" [min]="0" [max]="100" suffix="%" />Size and stroke
size is the diameter and strokeWidth the arc thickness, both numbers in px.
<wr-knob [(value)]="value" [size]="64" [strokeWidth]="5" />
<wr-knob [(value)]="value" [size]="160" [strokeWidth]="14" />Without the readout
[showValue]="false" hides the number; give the knob an ariaLabel.
<wr-knob [(value)]="volume" [showValue]="false" ariaLabel="Volume" />Read-only and disabled
Read-only keeps its tab stop and refuses changes; disabled leaves the tab order.
<wr-knob [value]="62" readonly ariaLabel="Read-only" />
<wr-knob [value]="62" disabled ariaLabel="Disabled" />Keyboard
Arrows move one step, Shift + arrow ten steps, Home / End jump to the ends.
API
| 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 | color-mix(in srgb, var(--wr-border-base) 60%, transparent) |
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 | — |
CSS variables
Set these on the component's selector or a wrapper, not on :root: the defaults are declared on ngwr/knob's own element.
| Variable | Default | Declared on |
|---|---|---|
--wr-knob-font-family | var(--wr-font-family-base) | .wr-knob |
--wr-knob-suffix-font-size | var(--wr-text-sm) | .wr-knob__suffix |
--wr-knob-suffix-font-weight | var(--wr-font-weight-medium) | .wr-knob__suffix |
--wr-knob-suffix-margin-inline-start | var(--wr-space-xs) | .wr-knob__suffix |
--wr-knob-text-font-size | var(--wr-text-xl) | .wr-knob__text |
--wr-knob-text-font-weight | var(--wr-font-weight-semibold) | .wr-knob__text |
Dependencies
| Built on | Form |
|---|
See also
Component SliderPick a number, or a range of two, by dragging a thumb.Component Number InputA number field with stepper buttons and locale formatting.Component GaugeA read-only semicircle dial for a single value.Guide FormsBind ngwr controls to any Angular form and show their errors.Component Form FieldWraps a form control with a label, a hint and its error messages.Component FormA plain layout wrapper for a label, a control and its error.