Knob

Knob is a form component to define number inputs with a dial.

Import #


import { KnobModule } from 'primeng/knob';

Basic #

Knob is an input component and used with the standard ngModel directive.


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

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.


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

Min/Max #

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>

Step #

Size of each movement is defined with the step property.


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

Template #

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>

Stroke #

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


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

Size #

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


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

Color #

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


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

Reactive #

Knob can be controlled with custom controls as well.


<p-knob [(ngModel)]="value" size="150" readonly="true"></p-knob>
<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>

ReadOnly #

When readonly present, value cannot be edited.


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

Disabled #

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>

Style #

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.

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.


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

<p-knob ariaLabel="Number"></p-knob>

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.

Knob API

API defines helper props, events and others for the PrimeNG Knob module.

Knob #

Knob is a form component to define number inputs with a dial.

Properties #

Defines the input properties of the component.

name	type	default	description
styleClass	string	null	Style class of the component.
style	Object	null	Inline style of the component.
ariaLabel	string	null	Defines a string that labels the input for accessibility.
ariaLabelledBy	string	null	Specifies one or more IDs in the DOM that labels the input field.
tabindex	number	0	Index of the element in tabbing order.
valueColor	string	var(--primary-color, Black)	Background of the value.
rangeColor	string	var(--surface-border, LightGray)	Background color of the range.
textColor	string	var(--text-color-secondary, Black)	Color of the value text.
valueTemplate	string	{value}	Template string of the value.
name	string	null	Name of the input element.
size	number	100	Size of the component in pixels.
step	number	1	Step factor to increment/decrement the value.
min	number	0	Mininum boundary value.
max	number	100	Maximum boundary value.
strokeWidth	number	14	Width of the knob stroke.
disabled	boolean	false	When present, it specifies that the component should be disabled.
showValue	boolean	true	Whether the show the value inside the knob.
readonly	boolean	false	When present, it specifies that the component value cannot be edited.

Emitters #

Defines emit that determine the behavior of the component based on a given condition or report the actions that the component takes.

name	parameters	description
onChange	value : number	Callback to invoke on value change.