Knob

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.

0

<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.

32

<form [formGroup]="formGroup">
    <p-knob formControlName="value" />
</form>

Boundaries are configured with the min and max properties whose defaults are 0 and 100 respectively.

10

<p-knob [(ngModel)]="value" [min]="-50" [max]="50" />

Size of each movement is defined with the step property.

0

<p-knob [(ngModel)]="value" [step]="10" />

Label is a string template that can be customized with the valueTemplate property having 60 as the placeholder .

60%

<p-knob [(ngModel)]="value" valueTemplate="{value}%" />

The border size is specified with the strokeWidth property as a number in pixels.

40

<p-knob [(ngModel)]="value" [strokeWidth]="5" />

Diameter of the knob is defined in pixels using the size property.

60

<p-knob [(ngModel)]="value" [size]="200" />

Colors are customized with the textColor, rangeColor and valueColor properties.

50

<p-knob [(ngModel)]="value" valueColor="SlateGray" rangeColor="MediumTurquoise" />

Knob can be controlled with custom controls as well.

0

<p-knob [(ngModel)]="value" size="150" readonly="true"/>
<div class="flex gap-2">
    <p-button 
        icon="pi pi-plus" 
        (onClick)="value = value+1" 
        [disabled]="value >= 100" />
    <p-button 
        icon="pi pi-minus" 
        (onClick)="value = value-1" 
        [disabled]="value <= 0" />
</div>

When readonly present, value cannot be edited.

50

<p-knob [(ngModel)]="value" [readonly]="true" />

When disabled is present, a visual hint is applied to indicate that the Knob cannot be interacted with.

75

<p-knob [(ngModel)]="value" [disabled]="true" />

Following is the list of structural style classes, for theming classes visit theming page.

NameElement
p-knobContainer element.
p-knob-textText element.
p-knob-valueValue element.

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.


<span id="label_number">Number</span>
<p-knob ariaLabelledBy="label_number"/>

<p-knob ariaLabel="Number"/>

Keyboard Support

KeyFunction
tabMoves focus to the slider.
left arrowdown arrowDecrements the value.
right arrowup arrowIncrements the value.
homeSet the minimum value.
endSet the maximum value.
page upIncrements the value by 10 steps.
page downDecrements the value by 10 steps.