Knob is a form component to define number inputs with a dial.
import { KnobModule } from 'primeng/knob';
Knob is an input component and used with the standard ngModel directive.
<p-knob [(ngModel)]="value"></p-knob>
Knob can also be used with reactive forms. In this case, the formControlName property is used to bind the component to a form control.
<form [formGroup]="formGroup">
<p-knob formControlName="value"></p-knob>
</form>
Boundaries are configured with the min and max properties whose defaults are 0 and 100 respectively.
<p-knob [(ngModel)]="value" [min]="-50" [max]="50"></p-knob>
Size of each movement is defined with the step property.
<p-knob [(ngModel)]="value" [step]="10"></p-knob>
Label is a string template that can be customized with the valueTemplate property having 60 as the placeholder .
<p-knob [(ngModel)]="value" valueTemplate="{value}%"></p-knob>
The border size is specified with the strokeWidth property as a number in pixels.
<p-knob [(ngModel)]="value" [strokeWidth]="5"></p-knob>
Diameter of the knob is defined in pixels using the size property.
<p-knob [(ngModel)]="value" [size]="200"></p-knob>
Colors are customized with the textColor, rangeColor and valueColor properties.
<p-knob [(ngModel)]="value" valueColor="SlateGray" rangeColor="MediumTurquoise"></p-knob>
When readonly present, value cannot be edited.
<p-knob [(ngModel)]="value" [readonly]="true"></p-knob>
When disabled is present, a visual hint is applied to indicate that the Knob cannot be interacted with.
<p-knob [(ngModel)]="value" [disabled]="true"></p-knob>
Following is the list of structural style classes, for theming classes visit theming page.
| Name | Element |
|---|---|
| p-knob | Container element. |
| p-knob-text | Text element. |
| p-knob-value | Value element. |
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 aria-labelledby and aria-label props.
<span id="label_number">Number</span>
<p-knob aria-labelledby="label_number"></p-knob>
<p-knob aria-label="Number"></p-knob>
| 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. |
API defines helper props, events and others for the PrimeNG Knob module.
Knob is a form component to define number inputs with a dial.
Defines the input properties of the component.
Defines emit that determine the behavior of the component based on a given condition or report the actions that the component takes.