Knob
Knob is a form component to define number inputs with a dial.
Knob is an input component and used with the standard ngModel directive.
Usage #
Examples #
Basic #
Knob is an input component and used with the standard ngModel directive.
Min/Max #
Boundaries are configured with the min and max properties whose defaults are 0 and 100 respectively.
Step #
Size of each movement is defined with the step property.
Template #
Label is a string template that can be customized with the valueTemplate property having 60 as the placeholder .
Stroke #
The border size is specified with the strokeWidth property as a number in pixels.
Size #
Diameter of the knob is defined in pixels using the size property.
Color #
Colors are customized with the textColor, rangeColor and valueColor properties.
Reactive #
Knob can be controlled with custom controls as well.
ReadOnly #
When readonly present, value cannot be edited.
Forms #
Template Driven #
Reactive Forms #
Knob can also be used with reactive forms. In this case, the formControlName property is used to bind the component to a form control.
Disabled #
When disabled is present, a visual hint is applied to indicate that the Knob cannot be interacted with.
Accessibility #
Screen Reader
Knob element component uses slider role in addition to the aria-valuemin, aria-valuemax and aria-valuenow attributes. Value to describe the component can be defined using ariaLabelledBy and ariaLabel props.
Keyboard Support
| Key | Function |
|---|---|
| tab | Moves focus to the slider. |
| left arrowdown arrow | Decrements the value. |
| right arrowup arrow | Increments the value. |
| home | Set the minimum value. |
| end | Set the maximum value. |
| page up | Increments the value by 10 steps. |
| page down | Decrements the value by 10 steps. |
