Source: https://primeng.org/knob

• Primary

  Surface

  PresetsAuraMaterialLaraNora

  Ripple

  RTL

• v20

  • v20

  • v19

  • v18

  • v17

• FEATURES

• API

• THEMING

• PASSTHROUGH

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.

0

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

Min/Max #

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" />

Step #

Size of each movement is defined with the step property.

0

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

Template #

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}%" />

Stroke #

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

40

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

Size #

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

60

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

Color #

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

50

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

Reactive #

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

50

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

Forms #

Template Driven

15

Submit

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

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.

15

Submit

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

Disabled #

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" />

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 ariaLabel="Number"/>

Keyboard Support

| Key | Function | | --- | --- | | tab | Moves focus to the slider. | | left arrow__down arrow | Decrements the value. | | right arrow__up 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. |

• Import

• Basic

• Min/Max

• Step

• Template

• Stroke

• Size

• Color

• Reactive

• ReadOnly

• Forms

  • Template Driven

  • Reactive Forms

• Disabled

• Accessibility

Theme Designer

Theme Designer is the ultimate tool to customize and design your own themes featuring a visual editor, figma to theme code, cloud storage, and migration assistant.

PrimeNG 20.3.0 by PrimeTek