Slider

Uso

Un modelo numérico crea un cursor; un modelo readonly [number, number] crea un intervalo. No hay un input range. minValue/maxValue definen la escala y step los incrementos. minStepsBetweenThumbs mantiene una separación mínima. Utiliza NumberInput cuando sea importante escribir un valor exacto.

Ejemplos

Interactúa con el ejemplo y abre Código para ver su implementación completa.

[
  20,
  60
]

Prueba y configura

Cambia las opciones y prueba la vista previa. Despliega el valor de la aplicación o el evento para consultar los datos reales; el template generado permanece junto al configurador.

25

<neu-slider
  [(value)]="volume"
  [minValue]="0"
  [maxValue]="100"
  [step]="1"
  orientation="horizontal"
  [showTicks]="false"
  [showValue]="true"
  [label]="'Volumen'"
  [unit]="'%'"
/>

import { signal } from '@angular/core';

export const volume = signal(25);

Signal Forms

Enlaza FormField una sola vez al componente; el campo controla el valor y la validación. El validador required considera 0 un valor. El ejemplo añade min(10), por lo que un valor inferior a diez es inválido. Sal del control para marcarlo como visitado y restablece el campo para limpiar el valor y el estado de interacción.

Guía de Signal Forms

{
  "field": 0
}

Valor y eventos

Utiliza [(value)] o [value] junto con (valueChange), no ambas formas. El modelo sincroniza el estado de la aplicación; los demás Outputs comunican los eventos documentados. touch comunica que se ha visitado o abandonado el control, no un valor nuevo.

Accesibilidad y teclado

Nombra el deslizador mediante label o ariaLabel y utiliza unit para describir el valor. Un intervalo presenta dos cursores enfocables con nombres de mínimo y máximo. Las flechas cambian un paso, PageUp/PageDown diez pasos y Home/End utiliza los límites permitidos del cursor enfocado.

API

Los Inputs, modelos y Outputs proceden del contrato de Core fijado. Pulsa un tipo con nombre para abrir su definición. Este componente no tiene templates públicos.

Inputs

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

Models

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

Outputs

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

Public Types

Abre un tipo para consultar su definición y los campos de sus interfaces.

import type { NeuSliderValue } from '@neural-ui/core/slider';

// Declaración pública (solo referencia)
export type NeuSliderValue = SliderValue;

Estilos y tokens

Carga los estilos de Core una sola vez. Utiliza los tokens públicos para personalizaciones locales o un preset para cambios de toda la aplicación. Conserva la legibilidad de etiquetas, foco, opciones seleccionadas y estados deshabilitados en modo claro y oscuro.

Componentes relacionados

Utiliza los controles relacionados para otro tipo de valor o interacción.

• NumberInput
• InputMask
• InputOTP