Todos los componentes (204)

Deslizador

Elección · Slider · .amset-slider

Qué es y cuándo usarlo

Una barra con uno o dos tiradores para elegir un valor, o un rango, a bulto dentro de un intervalo conocido. El rango sale solo de pasarle un array: defaultValue={[120, 480]}.

Cuándo usarlo

Un número aproximado, donde importa más dónde cae que la cifra exacta: un precio máximo, un margen, un umbral de aviso.
format: number, currency (euros, o el código de currency) o percent (se guarda en tanto por uno: 0.35 se ve 35 %).
marks pone rayas en cada paso (o donde diga un array) y ends escribe el mínimo y el máximo debajo. valueText cambia el texto del valor («3 noches», «Gratis»).
onChangeEnd avisa solo al soltar, para no pedir datos en cada paso del arrastre.

Cuándo no

Si la cifra exacta importa (un importe, unas unidades): NumberField.
El filtro de precio de un catálogo, con histograma y campos para escribir: RangeFilter.

Teclado: Tab llega al tirador; en un rango, primero al mínimo y luego al máximo. Las flechas mueven un paso (con Mayúsculas, un salto grande), Re Pág y Av Pág dan un salto grande, Inicio y Fin llevan a los extremos. En un rango, el mínimo no puede pasar del máximo. Deshabilitado no se mueve.

Accesibilidad: cada tirador es un <input type="range"> de verdad, escondido bajo el círculo que se ve, y dice su valor ya formateado. En un rango se llaman «Mínimo» y «Máximo» sin tener que pedirlo (o lo que diga thumbLabels). El deslizador no valida solo: el error y la ayuda (hint) se enlazan a los tiradores, que son los que tienen el foco. hiddenLabel quita la etiqueta de la vista, no del lector. La barra y el tirador se cogen en 24 px con ratón y en 44 px con el dedo, aunque se vean más finos.

Estados: el tirador se oscurece al pasar el ratón y al arrastrarlo, y crece un poco mientras se arrastra. Con el teclado, o con un valor nuevo desde fuera, el tirador y el relleno se deslizan hasta su sitio; arrastrando van pegados al dedo. El foco de teclado es un anillo de 2 px alrededor del tirador. Con error la barra y el tirador pasan a rojo (data-invalid); deshabilitado, a gris y sin cursor de mano.

Tamaños: sm, md (por defecto) y lg: barra de 4, 6 u 8 px, tirador de 14, 18 o 22 px, y la letra de la etiqueta y del apoyo como la de los campos del mismo tamaño.

Contexto: va dentro de LocaleProvider (o de AmsetProvider), que decide cómo se escriben los números y los importes.

Aspecto fino: variables CSS en .amset-slider:

Medidas: --amset-slider-thick (la barra), --amset-slider-thumb (el diámetro), --amset-slider-ring (el borde del tirador, 2 px), --amset-slider-brand (el ancho de las rayas, 2 px), --amset-slider-radius (las puntas de la barra) y --amset-slider-grow (cuánto crece el tirador al arrastrarlo: 1,15).
Letra: --amset-slider-font (etiqueta y valor), --amset-slider-description (ayuda y error) y --amset-slider-ends.
Zona pulsable: --amset-slider-target (24 px con ratón, 44 con el dedo).
Colores: --amset-slider-color (relleno y aro: el error y el deshabilitado solo cambian esta), --amset-slider-ink (las marcas sobre el relleno), --amset-slider-slot y --amset-slider-border (la barra vacía), --amset-slider-background-thumb y --amset-slider-color-brand.

Cómo se ve

<Slider label="Precio maximo" format="currency" minValue={0} maxValue={500} step={10} defaultValue={250} />
<Slider label="Precio" format="currency" maxValue={1000} defaultValue={[120, 480]} ends />
<Slider label="Margen aplicado" format="percent" maxValue={1} step={0.05} defaultValue={0.35} marks />

Props

Se importa con import { Slider } from '@amset/ui'. Las obligatorias van marcadas.

Prop	Tipo	Para qué sirve
`label`obligatoria	`string`	—
`aria-describedby`	`string`	—
`aria-details`	`string`	—
`aria-label`	`string`	—
`aria-labelledby`	`string`	—
`className`	`string`	—
`currency`	`string`	Codigo ISO cuando el formato es moneda.
`customFormat`	`Intl.NumberFormatOptions`	Escotilla de salida para un formato que no cubren los tres de arriba.
`decimals`	`number`	—
`defaultValue`	`T`	—
`disabled`	`boolean`	—
`ends`	`boolean`	Numeros del minimo y del maximo debajo de la barra.
`error`	`string`	Un texto aqui lo pinta en error y lo anuncia: el deslizador no valida solo.
`format`	`SliderFormat`	—
`hiddenLabel`	`boolean`	Quita la etiqueta de la vista y la pasa a `aria-label`. Para cuando el nombre ya esta escrito al lado (una cabecera propia, una celda de tabla): el lector la sigue leyendo, que es lo que no se puede perder.
`hint`	`string`	—
`id`	`string`	—
`marks`	`boolean \| readonly number[]`	Rayas bajo la barra: `true` las saca del paso, un array las pone donde diga.
`maxValue`	`number`	—
`minValue`	`number`	—
`name`	`string`	Para que el valor viaje en un formulario nativo. Con varios tiradores, cada uno lleva este nombre.
`onChange`	`(value: T) => void`	—
`onChangeEnd`	`(value: T) => void`	Al soltar: el que vale para pedirle algo a un servidor.
`orientation`	`"horizontal" \| "vertical"`	—
`showValue`	`boolean`	El valor actual junto a la etiqueta.
`size`	`"sm" \| "md" \| "lg"`	Grosor de la barra, diametro del tirador y cuerpo de letra: `sm` (4 y 14 px), `md` (6 y 18 px, por defecto) o `lg` (8 y 22 px). La zona que se puede pulsar no baja de 24 px con raton ni de 44 con el dedo.
`step`	`number`	—
`thumbLabels`	`readonly string[]`	Como se llama cada tirador en un rango. Por defecto, «Mínimo» y «Máximo».
`value`	`T`	—
`valueText`	`(values: readonly number[], formatted: string) => string`	Texto propio para el valor: "3 noches", "Gratis"...

Acepta además los atributos del elemento que pinta: className, style, data-*, aria-* y sus eventos.

Mandos

Estas variables CSS son la forma de adaptarlo. Se declaran sobre el selector del componente, no en :root: la hoja las redeclara en la propia regla y una declaración en el mismo elemento gana siempre.

Variable	Por defecto
`--amset-slider-thick`	`6px`
`--amset-slider-thumb`	`1.125rem`
`--amset-slider-ring`	`2px`
`--amset-slider-brand`	`2px`
`--amset-slider-radius`	`999px`
`--amset-slider-font`	`var(--amset-text-sm)`
`--amset-slider-description`	`var(--amset-text-sm)`
`--amset-slider-ends`	`var(--amset-text-xs)`
`--amset-slider-target`	`1.5rem`
`--amset-slider-grow`	`1.15`
`--amset-slider-color`	`var(--amset-accent)`
`--amset-slider-ink`	`var(--amset-accent-ink)`
`--amset-slider-slot`	`var(--amset-surface-2)`
`--amset-slider-border`	`var(--amset-border)`
`--amset-slider-background-thumb`	`var(--amset-surface)`
`--amset-slider-color-brand`	`var(--amset-border-bold)`

Cómo se cambia

.amset-slider {
  --amset-slider-thick: ...;
  --amset-slider-thumb: ...;
}

En el banco de pruebas

Cada estado y cada variante, para tocarlos de uno en uno, en su ficha de ui.amset.tech: