Knob

Ajusta un valor numérico acotado con un control circular.

Categoría: Formularios y selección
Import: @neural-ui/core/knob
Selector: neu-knob

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

Uso

Define la escala con min, max y step, manteniendo min por debajo de max. size es el diámetro en píxeles; showValue solo oculta el número visual. Asigna un nombre accesible y usa valueText cuando el valor necesite unidades.

Ejemplos

Prueba esta interacción gestionada por la aplicación. Código incluye los eventos y los datos iniciales.

Volumen

Valor actual: 40

Eventos: 0

Prueba y configura

Cambia las opciones públicas, prueba el resultado y consulta el template actualizado. Código contiene la implementación ejecutable completa.

Volumen

Valor actual: 40

Eventos: 0

disabled

readonly

invalid

min

max

step

size

showValue

Opciones avanzadas · 11

<neu-knob
  (valueChange)="onValueChange($event)"
  [disabled]="false"
  [readonly]="false"
  [invalid]="false"
  [min]="0"
  [max]="100"
  [step]="5"
  [size]="96"
  [showValue]="true"
  [ariaLabel]="'Volumen'"
  [label]="'Volumen'"
  [value]="40"
/>

Inputs de datos, callbacks y configuración estructurada

Estos inputs requieren un modelo o función, no un checkbox. Modifica el campo del mismo nombre en el componente de Código y enlázalo al template; los datos que ya usa esta vista previa se muestran en el estado anterior.

errors · readonly ValidationError.WithOptionalFieldTree[]

En Código: define errors con este tipo y utiliza [errors]="errors" (o errors() si es una signal).

valueText · ((value: number) => string) | undefined

En Código: define valueText con este tipo y utiliza [valueText]="valueText" (o valueText() si es una signal).

Estado y eventos

Accesibilidad y teclado

Enfoca el slider con Tab. Las flechas ajustan según step; Inicio/Fin alcanzan los límites. No se editan valores disabled o readonly.

Tecla	Acción
`Tab`	Enfoca el control cuando está habilitado.
`ArrowUp / ArrowRight`	Aumenta el valor según step, salvo en modo readonly.
`ArrowDown / ArrowLeft`	Reduce el valor según step, salvo en modo readonly.
`Home`	Establece el valor mínimo cuando se permite editar.
`End`	Establece el valor máximo cuando se permite editar.

API

Inputs, modelos y Outputs se extraen del paquete Core instalado. Los tipos públicos enlazan a sus definiciones. Los Templates incluyen ejemplos ejecutables.

Inputs

Configura el componente con [propiedad]="valor". Tu aplicación proporciona estos valores; el componente no debe reemplazar el estado que le pasas.

Nombre	Tipo	Por defecto	Uso en el template	Descripción
`ariaDescribedBy`	`string`	`''`	`[ariaDescribedBy]`	IDs de los elementos que describen el control, separados por espacios.
`ariaLabel`	`string`	`''`	`[ariaLabel]`	Nombre accesible del control o región.
`dirty`	`boolean`	`false`	`[dirty]`	Estado del formulario que indica que el usuario ha cambiado el valor.
`disabled`	`boolean`	`false`	`[disabled]`	Impide interactuar con este control.
`errors`	`readonly ValidationError.WithOptionalFieldTree[]`	`[]`	`[errors]`	Errores de validación proporcionados por el formulario o la aplicación.
`hidden`	`boolean`	`false`	`[hidden]`	Oculta el control según el estado del formulario.
`inputId`	`string`	`inject(NeuIdGenerator).getId('neu-knob-')`Valor derivado	`[inputId]`	Id estable del control, generado si se omite; permite asociar etiquetas o descripciones.
`invalid`	`boolean`	`false`	`[invalid]`	Muestra el estado inválido; no añade una regla de validación.
`label`	`string`	`''`	`[label]`	Etiqueta visible que identifica el campo o la acción.
`max`	`number \| undefined`	`100`	`[max]`	Límite numérico superior.
`min`	`number \| undefined`	`0`	`[min]`	Límite numérico inferior.
`name`	`string`	`''`	`[name]`	Nombre del control de formulario.
`pending`	`boolean`	`false`	`[pending]`	Estado del formulario que indica que hay una validación asíncrona pendiente.
`readonly`	`boolean`	`false`	`[readonly]`	Mantiene visible el valor aplicado, pero impide editarlo.
`required`	`boolean`	`false`	`[required]`	Marca el campo como obligatorio; utiliza un validador del formulario para exigirlo.
`showValue`	`boolean`	`true`	`[showValue]`	Muestra el valor numérico dentro del control.
`size`	`number`	`80`	`[size]`	Diámetro del control en píxeles.
`step`	`number`	`1`	`[step]`	Incremento positivo utilizado al ajustar el valor numérico.
`touched`	`boolean`	`false`	`[touched]`	Estado del formulario que indica que el control ha sido visitado.
`valueText`	`((value: number) => string) \| undefined`	`undefined`	`[valueText]`	Función que convierte el número en texto accesible, por ejemplo con sus unidades.

Models

Un modelo admite [(propiedad)]="signal" o la pareja [propiedad] y (propiedadChange). Elige una de las dos formas, no ambas.

Nombre	Tipo	Por defecto	Uso en el template	Descripción
`value`	`number`	`0`	`[(value)]`	Valor numérico aplicado dentro del rango configurado.

Outputs

Escucha un evento con (evento)="handler($event)". La tabla indica qué datos recibe tu función y cómo utilizarlos.

Nombre	Valor emitido	Uso en el template	Descripción
`touch`	`void`	`(touch)="onTouch($event)"`	Notifica al formulario que el control ha sido visitado; no es un cambio de valor.

Templates

ng-content proyecta contenido dentro del componente. Los inputs TemplateRef reciben un template; las directivas ng-template identifican templates con un contexto tipado. Una directiva compartida en el entrypoint no es necesariamente un slot de este componente.

Este componente no expone proyección de contenido ni templates públicos de personalización.

Estilos y tokens

Usa los tokens públicos de la referencia. El diseño del contenedor pertenece a tu aplicación; comprueba el resultado en modo claro y oscuro y en espacios estrechos.

Tokens específicos

Token	Efecto	Estado / variante	Valor / origen	Alternativa
`--neu-knob-display-color`	Valor del tema heredado que utiliza este componente	Superficie del campo	`var(--neu-text)`Declaración raíz	`--neu-text`
`--neu-knob-label-color`	Valor del tema heredado que utiliza este componente	Superficie del campo	`var(--neu-text-muted)`Declaración raíz	`--neu-text-muted`
`--neu-knob-track`	Valor del tema heredado que utiliza este componente	Superficie del campo	`var(--neu-surface-3)`Declaración raíz	`--neu-surface-3`

Tokens compartidos utilizados

Sobrescríbelos en un contenedor local para afectar a este ejemplo. Una modificación en :root afecta a los demás componentes que utilizan el mismo token.

Token	Efecto aquí	Otros efectos	Valor / alternativa
`--neu-focus-ring`	Anillo normal del foco de teclado	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`0 0 0 var(--neu-focus-ring-width) rgba(0, 122, 255, 0.15)`
`--neu-primary`	Color de marca en controles activos y énfasis	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`#007aff`
`--neu-text`	Color del texto principal y de los iconos que lo heredan	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`#0f172a`
`--neu-text-muted`	Etiquetas secundarias y contenido de ayuda	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`#475569`
`--neu-border-color`	Valor del tema heredado que utiliza este componente	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`var(--neu-border)`