A rotary dial for selecting a numeric value along a 270° arc. Drag the pointer or use arrow keys. Integrates with Angular Forms via [(ngModel)] / formControlName.
Playground
<ply-knob color="primary" size="default" [showValue]="true">Knob</ply-knob>
Unlock it plus 90 pro blocks, widgets & layouts — $99 one-time. Lifetime updates, 14-day money-back guarantee.
Bind with [(ngModel)]. Use color for the accent and showValue to display the number in the center.
Primary · 65
Success · 40
Danger · 80
<ply-knob [(ngModel)]="volume" showValue ariaLabel="Volume"></ply-knob> <ply-knob color="success" [(ngModel)]="value" showValue></ply-knob>
TypeScript
import { Component } from '@angular/core';
// Install: npx ply-ui-cli add knob
// Paths are relative to aliases.components (default: src/app/components)
import { KnobComponent } from './knob/knob.component';
@Component({
selector: 'app-knob-example',
imports: [
KnobComponent
],
template: `...`
})
export class KnobExampleComponent {}Install
npx ply-ui-cli add knob
Control the range with min, max, and step. Use size for dial diameter (sm / default / lg).
sm · 22°C
default · 22°C
lg · 22°C
<ply-knob size="lg" color="accent" [min]="16" [max]="30" [step]="0.5" [(ngModel)]="temperature" showValue> </ply-knob>
TypeScript
import { Component } from '@angular/core';
// Install: npx ply-ui-cli add knob
// Paths are relative to aliases.components (default: src/app/components)
import { KnobComponent } from './knob/knob.component';
@Component({
selector: 'app-knob-example',
imports: [
KnobComponent
],
template: `...`
})
export class KnobExampleComponent {}Install
npx ply-ui-cli add knob
Set [disabled]="true" to prevent interaction.
<ply-knob [disabled]="true" [(ngModel)]="value" showValue></ply-knob>
TypeScript
import { Component } from '@angular/core';
// Install: npx ply-ui-cli add knob
// Paths are relative to aliases.components (default: src/app/components)
import { KnobComponent } from './knob/knob.component';
@Component({
selector: 'app-knob-example',
imports: [
KnobComponent
],
template: `...`
})
export class KnobExampleComponent {}Install
npx ply-ui-cli add knob
Run the following command to add this component to your project:
npx ply-ui-cli add knob
For AI agents
Copy a prompt with the registry name, CLI install, and import — or add the Ply MCP server.
npx -y ply-ui-mcp
Ply provides standalone components. Import the exact elements you want to use into your component.
// Install: npx ply-ui-cli add knob
// Paths are relative to aliases.components (default: src/app/components)
import { KnobComponent } from './knob/knob.component';
@Component({
selector: 'app-your-component',
imports: [
KnobComponent
],
template: `...`
})
export class YourComponent {} API for knob — generated from JSDoc in the library source.
| API | Member | Type | Default | Description |
|---|---|---|---|---|
ply-knob | class | string | '' | Extra host classes merged via `cn()`. |
ply-knob | min | number | 0 | Minimum value. |
ply-knob | max | number | 100 | Maximum value. |
ply-knob | step | number | 1 | Step increment for drag and keyboard. |
ply-knob | color | SliderColor | 'primary' | Semantic track / value color. |
ply-knob | size | KnobSize | 'default' | Dial diameter size. |
ply-knob | showValue | boolean | false | Shows the current value in the center of the dial. |
ply-knob | disabled | boolean | false | Whether the control is disabled (consumer-facing input). |
ply-knob | ariaLabel | unknown | 'Knob' | Accessible name for the slider. |
ply-knob | (valueChange) | number | — | Emitted whenever the value changes. |
Content