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