Component

Knob

Circular rotary control (dial) to select a numeric value via drag or keyboard. Implements ControlValueAccessor.

import { NeuKnobComponent } from '@neural-ui/core/knob';

Custom range (0–360, step 5)

Angle

90°

Basic (0–100)

Volume

Value: 42

Sizes

Small

Normal

Large

Visual styling

Signal

The value and label colors are customized via CSS custom properties, not via component inputs.

import { FormControl, ReactiveFormsModule } from '@angular/forms';
import { NeuKnobComponent } from '@neural-ui/core/knob';

@Component({
  imports: [NeuKnobComponent, ReactiveFormsModule],
  template: `
    <neu-knob
      [min]="0"
      [max]="100"
      [formControl]="volumeCtrl"
      label="Volumen"
    />
  `
})
export class MyComponent {
  readonly volumeCtrl = new FormControl(50, { nonNullable: true });
}

.my-knob-theme {
  --neu-knob-display-color: var(--neu-warning-text);
  --neu-knob-label-color: var(--neu-text);
}

<div class="my-knob-theme">
  <neu-knob [formControl]="volumeCtrl" label="Volume" />
</div>