Knob is a form component to define number inputs with a dial.
import { Knob } from 'primeng/knob';
Knob is an input component and used with the standard ngModel directive.
<p-knob [(ngModel)]="value" />
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" />
</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" />
Size of each movement is defined with the step property.
<p-knob [(ngModel)]="value" [step]="10" />
Label is a string template that can be customized with the valueTemplate property having 60 as the placeholder .
<p-knob [(ngModel)]="value" valueTemplate="{value}%" />
The border size is specified with the strokeWidth property as a number in pixels.
<p-knob [(ngModel)]="value" [strokeWidth]="5" />
Diameter of the knob is defined in pixels using the size property.
<p-knob [(ngModel)]="value" [size]="200" />
Colors are customized with the textColor, rangeColor and valueColor properties.
<p-knob [(ngModel)]="value" valueColor="SlateGray" rangeColor="MediumTurquoise" />
Knob can be controlled with custom controls as well.
<p-knob [(ngModel)]="value" size="150" readonly="true"/>
<div class="flex gap-2">
<p-button icon="pi pi-plus" (click)="value = value+1" [disabled]="value >= 100" />
<p-button icon="pi pi-minus" (click)="value = value-1" [disabled]="value <= 0" />
</div>
When readonly present, value cannot be edited.
<p-knob [(ngModel)]="value" [readonly]="true" />
When disabled is present, a visual hint is applied to indicate that the Knob cannot be interacted with.
<p-knob [(ngModel)]="value" [disabled]="true" />
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.
<span id="label_number">Number</span>
<p-knob ariaLabelledBy="label_number"/>
<p-knob ariaLabel="Number"/>
| 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. |