Angular Knob is a form component to define number inputs with a dial.
<h3 id="setup">Setup</h3>
Refer to PrimeNG <a target="_blank" href="https://primefaces.org/primeng/showcase/#/setup">setup documentation</a> for download and installation steps for your environment.
<h3 id="import">Import</h3>
<pre><code class="lang-js">import {KnobModule} from 'primeng/knob';
</code></pre>
<h3 id="getting-started">Getting Started</h3>
Knob is an input component and used with the standard ngModel directive.
<pre><code class="lang-html">&lt;p-knob [(ngModel)]="value"&gt;&lt;/p-knob&gt;
</code></pre>
<pre><code class="lang-js">value: number = 0;
</code></pre>
<h3 id="minimum-and-maximum">Minimum and Maximum</h3>
Boundaries are configured with the min and max values whose defaults are 0 and 100 respectively.
<pre><code class="lang-html">&lt;p-knob [(ngModel)]="value" [min]="-50" [max]="50"&gt;&lt;/p-knob&gt;
</code></pre>
<h3 id="step">Step</h3>
Step factor is 1 by default and can be customized with step option.
<pre><code class="lang-html">&lt;p-knob [(ngModel)]="value" [step]="10"&gt;&lt;/p-knob&gt;
</code></pre>
<h3 id="step">Step</h3>
Step factor is 1 by default and can be customized with step option.
<pre><code class="lang-html">&lt;p-knob [(ngModel)]="value" valueColor="SlateGray" rangeColor="MediumTurquoise"&gt;&lt;/p-knob&gt;
</code></pre>
<h3 id="size">Size</h3>
Default size of the Knob is 100 pixels for width and height, use the size property to customize it per your requirements.
<pre><code class="lang-html">&lt;p-knob [(ngModel)]="value" [size]="200"&gt;&lt;/p-knob&gt;
</code></pre>
<h3 id="theming">Theming</h3>
Knob supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the <a target="_blank" href="https://primefaces.org/primeng/showcase/#/theming">Designer</a> tool.
<h3 id="resources">Resources</h3>
Visit the PrimeNG <a target="_blank" href="https://primefaces.org/primeng/showcase/#/knob">Knob</a> showcase for demos and documentation.

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

### Setup

Refer to PrimeNG [setup documentation](https://primefaces.org/primeng/showcase/#/setup) for download and installation steps for your environment.


### Import

```js
import {KnobModule} from 'primeng/knob';
```

### Getting Started

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

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

```js
value: number = 0;
```

### Minimum and Maximum

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

```html
<p-knob [(ngModel)]="value" [min]="-50" [max]="50"></p-knob>
```

### Step

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

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

### Step

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

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

### Size

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

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

### Theming

Knob supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the [Designer](https://primefaces.org/primeng/showcase/#/theming) tool.

### Resources

Visit the PrimeNG [Knob](https://primefaces.org/primeng/showcase/#/knob) showcase for demos and documentation.