Componente

Knob

Control giratorio circular (dial) para seleccionar un valor numérico mediante arrastre o teclado. Implementa ControlValueAccessor.

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

Rango personalizado (0–360, paso 5)

Ángulo

90°

Básico (0–100)

Volumen

Valor: 42

Tamaños

Pequeño

Normal

Grande

Personalización visual

Señal

El color del valor y de la etiqueta se personaliza con CSS custom properties, no con inputs del componente.

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>