DEV Community

loading...
Cover image for Angular Knob

Angular Knob

primetek profile image PrimeTek ・1 min read

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

Setup

Refer to PrimeNG setup documentation for download and installation steps for your environment.

Import

import {KnobModule} from 'primeng/knob';
Enter fullscreen mode Exit fullscreen mode

Getting Started

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

<p-knob [(ngModel)]="value"></p-knob>
Enter fullscreen mode Exit fullscreen mode
value: number = 0;
Enter fullscreen mode Exit fullscreen mode

Minimum and Maximum

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

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

Step

Step factor is 1 by default and can be customized with step option.

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

Step

Step factor is 1 by default and can be customized with step option.

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

Size

Default size of the Knob is 100 pixels for width and height, use the size property to customize it per your requirements.

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

Theming

Knob supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the Designer tool.

Resources

Visit the PrimeNG Knob showcase for demos and documentation.

Discussion (0)

pic
Editor guide