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" />
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" />
<form #exampleForm="ngForm" (ngSubmit)="onSubmit(exampleForm)" class="flex flex-col gap-4">
<div class="flex flex-col items-center gap-1">
<p-knob #model="ngModel" [(ngModel)]="value" [invalid]="isInvalid(model)" name="knob" />
@if (isInvalid(model)) {
<p-message severity="error" size="small" variant="simple">{{ getErrorMessage(model) }}</p-message>
}
</div>
<button pButton severity="secondary" type="submit"><span pButtonLabel>Submit</span></button>
</form>
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]="exampleForm" (ngSubmit)="onSubmit()" class="flex flex-col gap-4">
<div class="flex flex-col items-center gap-1">
<p-knob formControlName="value" [invalid]="isInvalid('value')" />
@if (isInvalid('value')) {
<p-message severity="error" size="small" variant="simple">{{ getErrorMessage('value') }}</p-message>
}
</div>
<button pButton severity="secondary" type="submit"><span pButtonLabel>Submit</span></button>
</form>
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. |