'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
Formularios
Slider
Elige un valor o un rango arrastrando, con el valor visible y formateado.
import { Slider } from '@alea/ui';
Ejemplos
Slider
Un valor, mostrado y con formato.
Rango
Un valor de tipo array da dos manijas; nombra cada una.
Marcas, burbuja de valor, tamaños y relleno centrado
marks agrega puntos (y etiquetas); showTooltip muestra el valor sobre la manija; fillOffset rellena desde el medio para ajustes −/+.
Configuraciones
Cada valor de cada propiedad, lado a lado. Los números coinciden con la leyenda.
- Show Tooltip
showTooltip - Show Value
showValue - Size
size - Tone
tone
Estados
Cada estado de interacción, forzado para compararlos, en ambos temas.
Oscuro
Claro
Anatomía
Las partes del componente y la clase que da estilo a cada una.
Tokens
Los tokens de diseño que usa este componente, con su valor en el tema actual. Cambia cualquiera para darle otro estilo.
Color
--alea-border…--alea-chip-bg…--alea-chip-text…--alea-focus…--alea-focus-halo…--alea-gradient-accent-linear…--alea-status-danger…--alea-status-info…--alea-status-success…--alea-status-warning…--alea-surface-raised…--alea-text…--alea-text-faint…--alea-text-muted…
Space
--alea-space-2…--alea-space-5…
Radius
--alea-radius-full…--alea-radius-sm…
Type
--alea-font-family-body…--alea-font-size-sm…--alea-font-size-xs…--alea-font-weight-medium…--alea-font-weight-semibold…
Motion
--alea-motion-duration-fast…--alea-motion-ease-out…
Other
--alea-control-thumb…
Props
Slider props
Elige un valor, o un rango cuando value es un array (dos manijas): marcas con etiquetas, una burbuja de valor, tres tamaños, tonos y un relleno centrado. Funcionan las flechas, Re Pág/Av Pág, Inicio y Fin.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
fillOffset | number | - | El relleno empieza aquí en lugar del mínimo: 0 en un slider de −50 a 50 rellena hacia cualquier lado. |
getValueText | ((value: number) => string) | - | Lo que dicen los lectores de pantalla para un valor, en lugar del número: "1:23 de 4:56", "Alto". |
label | ReactNode | - | La etiqueta visible. |
marks | boolean | { value: number; label?: ReactNode; }[] | - | Marcas a lo largo del riel: true para una en cada paso, o valores con etiquetas opcionales ([{ value: 0, label: 'Off' }]). |
showTooltip | "drag" | "always" | "never" | - | Una burbuja con el valor sobre la manija: al arrastrar o con foco (por defecto cuando showValue es false), siempre o nunca. |
showValue | boolean | true | Muestra el valor actual junto a la etiqueta. Por defecto true. |
size | "sm" | "md" | "lg" | - | sm (riel de 4 px, manija de 16 px), md (por defecto) o lg (riel de 8 px, manija de 24 px). |
thumbLabels | string[] | - | Etiquetas para cada manija en un rango ("Mínimo", "Máximo"). |
tone | "danger" | "accent" | "success" | "warning" | "info" | - | El color del relleno: accent (por defecto), success, warning, danger o info. |
Especificaciones
Generado desde el código: las variantes de los tipos, los estados y tokens del CSS, y los patrones de motion que aplican. Las grillas muestran el componente real en ambos temas; los números se miden en la página.
- Variantes
showTooltipdragalwaysneversizesmmdlgtonedangeraccentsuccesswarninginfo- Estados
- HoverDraggingKeyboard focusDisabled
- Oscuro y claro
- Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
- Clases para estilos
.alea-slider.alea-slider-head.alea-slider-output.alea-slider-track.alea-slider-rail.alea-slider-fill.alea-slider-mark.alea-slider-mark-label.alea-slider-thumb.alea-slider-tip- Atributos data
data-size=smdata-size=lgdata-tone=successdata-tone=warningdata-tone=dangerdata-tone=infodata-indata-labeled-marksdata-mode=always
Accesibilidad
- Cada control es un slider con su propia etiqueta en un rango.
Teclado
| Tecla | Acción |
|---|---|
| Flechas | Paso |
| Re Pág / Abajo | Pasos más grandes |
| Inicio / Fin | Mínimo y máximo |
Qué hacer y qué evitar
Hacer
- Muestra el valor.
- Usa formatOptions para las unidades.
Evitar
- No lo uses cuando importa un número exacto: agrega un NumberField.