Formularios
Slider
Ajusta una preferencia acotada con arrastre y controles de paso.
Importación
import { NeuSliderComponent } from '@neural-ui/native/slider';Ejemplos
Importa ExampleComponent en su padre y coloca <app-example /> dentro del neu-theme raíz de tu aplicación. El preview aporta el marco y las zonas seguras; utiliza la estructura raíz de Instalación en tu app.
Encuentra tu concentración
Ajusta el volumen en la pantalla de una sesión de concentración. Activa los botones opcionales, silencia al llegar a cero e inicia o pausa la vista previa visual. No se reproduce audio.
Ver y copiar el ejemplo completo
import { Component, signal } from '@angular/core';
import { NeuIconButtonComponent } from '@neural-ui/native/icon-button';
import { NeuSwitchComponent } from '@neural-ui/native/switch';
import { NeuCardComponent } from '@neural-ui/native/card';
import { NeuBadgeComponent } from '@neural-ui/native/badge';
import { NeuSliderComponent } from '@neural-ui/native/slider';
import { NeuCardHeaderDirective } from '@neural-ui/native/card';
import { View, Text, Image, ScrollView } from '@ng-native/components';
@Component({
selector: 'app-example',
imports: [NeuIconButtonComponent, NeuSwitchComponent, NeuCardComponent, NeuBadgeComponent, NeuSliderComponent, NeuCardHeaderDirective, View, Text, Image, ScrollView],
template: `
<scroll-view class="product-scroll" keyboardShouldPersistTaps="handled" [showsVerticalScrollIndicator]="false"><view class="product-stack"><view class="product-section"><text class="product-title" accessibilityRole="header">Encuentra tu concentración</text><text class="product-caption">Un poco de espacio para tu próxima idea</text></view>
<neu-card variant="surface"><view neuCardHeader class="session-heading"><image class="session-cover" [source]="{ uri: cover }" resizeMode="cover" accessibilityLabel="Paisaje original de luna en tonos índigo y azul" /><view class="product-row"><view class="product-copy"><text class="studio-kicker">NEURAL SESSIONS / 01</text><text class="session-title" accessibilityRole="header">Al caer la tarde</text><text class="product-caption">Ambiente · Concentración</text></view><neu-icon-button [label]="previewing() ? 'Pausar vista previa' : 'Iniciar vista previa'" [svg]="previewing() ? pauseIcon : playIcon" size="md" variant="solid" (pressed)="previewing.set(!previewing())" /></view></view>
<view class="session-controls"><neu-slider decreaseLabel="Disminuir" increaseLabel="Aumentar" label="Volumen de reproducción" [(value)]="volume" [min]="0" [max]="100" [step]="5" [showButtons]="buttons()" /><view class="product-row"><neu-badge [label]="volume() === 0 ? 'Silenciado' : previewing() ? 'Vista previa activa' : 'Vista previa pausada'" [tone]="volume() === 0 ? 'neutral' : 'info'" /></view></view></neu-card>
<view class="session-preference"><neu-switch label="Mostrar botones de ajuste" [(checked)]="buttons" /></view><text class="product-caption">Demostración visual; no se reproduce audio.</text></view></scroll-view>
`,
styles: `
.actions { gap: 12px; align-items: flex-start; } text { color: var(--neu-text, #172033); font-size: 16px; }
:host { flex: 1; flex-shrink: 1; min-height: 0; }
.product-scroll { flex: 1; flex-shrink: 1; height: 0px; min-height: 0; }
.product-stack { gap: 24px; padding-bottom: 20px; }
.product-section { gap: 12px; }
.product-row { flex-direction: row; align-items: center; gap: 12px; }
.product-copy { flex: 1; min-width: 0; gap: 4px; }
.product-title { color: var(--neu-text, #172033); font-size: 24px; line-height: 30px; font-weight: 600; }
.product-heading { color: var(--neu-text, #172033); font-size: 17px; line-height: 23px; font-weight: 600; }
.product-caption { color: var(--neu-muted, #596477); font-size: 14px; line-height: 20px; }
.product-actions { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; }
.product-surface { gap: 16px; padding: 16px; border-radius: 16px; background-color: var(--neu-surface, #ffffff); border-width: 1px; border-color: var(--neu-border, #a5afbf); }
.session-heading { gap: 18px; }
.session-cover { width: 100%; aspect-ratio: 1.5; border-radius: 12px; }
.studio-kicker { color: var(--neu-muted, #596477); font-size: 10px; line-height: 16px; font-weight: 600; letter-spacing: 1px; }
.session-title { color: var(--neu-text, #172033); font-size: 25px; line-height: 32px; font-weight: 600; }
.session-controls { gap: 12px; padding-top: 8px; }
.session-preference { padding-left: 4px; padding-right: 4px; }
`,
})
export class ExampleComponent {
readonly cover = '/assets/media/v2/night.png';
readonly volume = signal(50);
readonly buttons = signal(false);
readonly previewing = signal(false);
readonly playIcon = '<svg viewBox="0 0 24 24" fill="currentColor"><path d="m8 5 11 7-11 7Z"/></svg>';
readonly pauseIcon = '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M6 5h4v14H6zM14 5h4v14h-4z"/></svg>';
}Ajuste por pasos
Ajusta la escala de texto de diez en diez y compara un límite de solo lectura.
Ver y copiar el ejemplo completo
import { Component, signal } from '@angular/core';
import { NeuSliderComponent } from '@neural-ui/native/slider';
import { View, Text, ScrollView } from '@ng-native/components';
@Component({
selector: 'app-example',
imports: [NeuSliderComponent, View, Text, ScrollView],
template: `
<scroll-view class="usage-scroll" keyboardShouldPersistTaps="handled"><view class="usage-stack">
<neu-slider decreaseLabel="Disminuir" increaseLabel="Aumentar" label="Escala del texto" [(value)]="textScale" [min]="100" [max]="150" [step]="10" /><text class="usage-caption">Escala del texto: {{ textScale() }}%</text>
<neu-slider decreaseLabel="Disminuir" increaseLabel="Aumentar" label="Límite de volumen de la organización" [value]="60" [readonly]="true" />
</view></scroll-view>
`,
styles: `
.actions { gap: 12px; align-items: flex-start; } text { color: var(--neu-text, #172033); font-size: 16px; }
.usage-scroll { flex: 1; }
.usage-stack { gap: 20px; padding-bottom: 20px; }
.usage-section { gap: 12px; }
.usage-heading { color: var(--neu-text, #172033); font-size: 16px; font-weight: 600; }
.usage-caption { color: var(--neu-muted, #64748b); font-size: 14px; }
.usage-row { flex-direction: row; flex-wrap: wrap; gap: 12px; align-items: center; }
.usage-actions { flex-direction: row; flex-wrap: wrap; gap: 8px; align-items: center; }
`,
})
export class ExampleComponent {
readonly volume = signal(50);
readonly textScale = signal(100);
}Sin botones
Toca o arrastra la pista para ajustar el volumen sin botones de incremento.
Ver y copiar el ejemplo completo
import { Component, signal } from '@angular/core';
import { NeuSliderComponent } from '@neural-ui/native/slider';
import { View, Text, ScrollView } from '@ng-native/components';
@Component({
selector: 'app-example',
imports: [NeuSliderComponent, View, Text, ScrollView],
template: `
<scroll-view class="usage-scroll" keyboardShouldPersistTaps="handled"><view class="usage-stack">
<neu-slider decreaseLabel="Disminuir" increaseLabel="Aumentar" label="Volumen de reproducción" [(value)]="volume" [showButtons]="false" [min]="0" [max]="100" [step]="5" /><text class="usage-caption">Volumen: {{ volume() }}%</text>
</view></scroll-view>
`,
styles: `
.actions { gap: 12px; align-items: flex-start; } text { color: var(--neu-text, #172033); font-size: 16px; }
.usage-scroll { flex: 1; }
.usage-stack { gap: 20px; padding-bottom: 20px; }
.usage-section { gap: 12px; }
.usage-heading { color: var(--neu-text, #172033); font-size: 16px; font-weight: 600; }
.usage-caption { color: var(--neu-muted, #64748b); font-size: 14px; }
.usage-row { flex-direction: row; flex-wrap: wrap; gap: 12px; align-items: center; }
.usage-actions { flex-direction: row; flex-wrap: wrap; gap: 8px; align-items: center; }
`,
})
export class ExampleComponent {
readonly volume = signal(50);
}Playground interactivo
Ajusta la configuración y prueba el resultado.
Capturas del dispositivo en inglés.
Referencia API
Inputs
| Nombre | Tipo | Predeterminado | Enlace | Descripción |
|---|---|---|---|---|
| label | string | Obligatorio | Input | Nombre legible del control, acción o grupo. |
| min | number | 0 | Input | Límite inferior del rango numérico. |
| max | number | 100 | Input | Límite superior del rango o cantidad máxima de elementos, según el control. |
| step | number | 1 | Input | Incremento aplicado a los cambios numéricos. Debe ser positivo y compatible con el rango. |
| showButtons | boolean | true | Input | Muestra los botones de disminuir y aumentar. Usa false para ajustar solo desde la pista táctil; las acciones accesibles de incremento y decremento siguen disponibles. |
| disabled | boolean | false | Input | Desactiva la interacción del usuario. La aplicación puede seguir proporcionando valores. |
| readonly | boolean | false | Input | Impide editar o seleccionar desde el control y conserva el valor actual. |
| increaseLabel | string | 'Increase' | Input | Texto o nombre accesible utilizado para aumentar. No ejecuta la acción por sí solo. |
| decreaseLabel | string | 'Decrease' | Input | Texto o nombre accesible utilizado para disminuir. No ejecuta la acción por sí solo. |
Models
| Nombre | Tipo | Predeterminado | Enlace | Descripción |
|---|---|---|---|---|
| value | number | 0 | Model · bidireccional | Valor editado o ID(s) seleccionado(s), según el tipo declarado. Enlaza una signal escribible mediante [(value)]. |
Outputs
| Nombre | Payload | Cuándo se emite |
|---|---|---|
| valueChange | number | Emite el valor actualizado de value. [(value)] enlaza este output junto con su input model. |
| touch | void | Comunica la interacción del usuario al formulario o aplicación que lo contiene. |
Estado de los models
Enlaza la signal con [(nombreModel)] sin llamarla. Utiliza nombreModel() para leer su valor.
import { signal } from '@angular/core';
// Fields inside your component class
readonly value = signal<number>(0);