Knob
A value on a dial — drag along the ring or use the arrow keys.
Basic
A dial from 0 to 100 bound with ngModel. Drag it, or Tab to it and use the arrow keys, Page Up / Down, Home / End.
Value: 40
Ring
arc="ring" is a full circle from the top with a handle; dragging does not jump over the top.
Limit
limit caps the value below max — the rest of the ring is marked, End stops at the limit.
Your plan allows up to 20 of 50 seats.
Step
min, max and step — dragging and the keys snap to the step.
Value template
valueTemplate formats the text in the middle — {value} is the number in the current locale.
Template
<ng-template txKnobValue let-value> puts your own content in the middle.
Sizes
size in px and strokeWidth for the ring; the text scales with the size.
States
readonly shows a value that cannot change; disabled dims the knob.
Form
With a form control and Validators.min inside tx-field — the field names the knob.
Design tokens
[dt] changes the knob colours of one knob.