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. |
| p-knob-text | Text 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.
| Name | Type | Default | Description |
|---|---|---|---|
| size | number | 100 | Size of the component in pixels. |
| disabled | boolean | false | When present, it specifies that the component should be disabled. |
| readonly | boolean | false | When present, it specifies that the component value cannot be edited. |
| step | number | null | Step factor to increment/decrement the value. |
| min | number | 0 | Mininum boundary value. |
| max | number | 100 | Maximum boundary value. |
| valueColor | string | null | Background of the value. |
| rangeColor | number | null | Background color of the range. |
| textColor | number | null | Color of the value text. |
| strokeWidth | number | 14 | Width of the knob stroke. |
| showValue | boolean | true | Whether the show the value inside the knob. |
| valueTemplate | string | {value} | Template string of the value. |
| style | object | null | Inline style of the component. |
| styleClass | string | null | Style class of the component. |
| Name | Parameters | Description |
|---|---|---|
| onChange | value: New value | Callback to invoke when the value changes. |