Componentes · Ola 2 · Formularios

Slider

Elige un número, o un rango, entre un mínimo y un máximo. El tramo elegido se ilumina con el color de selección y el valor se ve en mono. Se usa con el puntero o con las flechas, y cada pulgar anuncia su valor.

import { Slider } from '@archeblack/ui';

Ejemplos

Un valor

label, min y max; valueText suma la unidad al anuncio sin cambiar lo que se ve.

Svelte

<script lang="ts">
	import { Slider } from '@archeblack/ui';

	let replicas = $state(3);
</script>

<!-- En pantalla se ve «3»; el lector de pantalla dice «3 réplicas». -->
<div style:width="min(100%, 20rem)">
	<Slider
		label="Réplicas"
		min={1}
		max={8}
		bind:value={replicas}
		valueText={(value) => `${value} ${value === 1 ? 'réplica' : 'réplicas'}`}
	/>
</div>

Con formato

format escribe el valor en pantalla y en aria-valuetext; step fija el paso.

Svelte

<script lang="ts">
	import { Slider } from '@archeblack/ui';

	let limit = $state(60);
</script>

<!-- format escribe el valor en pantalla y es también su aria-valuetext. -->
<div style:width="min(100%, 20rem)">
	<Slider
		label="Límite de CPU"
		min={0}
		max={100}
		step={5}
		bind:value={limit}
		format={(value) => `${value} %`}
	/>
</div>

Rango

Con range, dos pulgares y un valor [desde, hasta].

Svelte

<script lang="ts">
	import { Slider } from '@archeblack/ui';

	let price = $state<[number, number]>([120, 380]);
</script>

<!-- Dos pulgares: se llaman «Precio mínimo» y «Precio máximo». -->
<div style:width="min(100%, 20rem)">
	<Slider
		label="Precio"
		range
		min={0}
		max={500}
		step={10}
		bind:value={price}
		format={(value) => `${value} US$`}
	/>
</div>

Deshabilitado

Sin brillo y fuera del orden de tabulación.

Svelte

<script lang="ts">
	import { Slider } from '@archeblack/ui';
</script>

<div style:width="min(100%, 20rem)">
	<Slider label="Memoria" min={1} max={16} value={4} format={(value) => `${value} GB`} disabled />
</div>

Props

Props de Slider
Prop	Descripción
`bind:value?` `number \| [number, number]`	El valor: un número o, con `range`, `[desde, hasta]`. Sin valor empieza en `min` (o en `[min, max]`).
`range?` `boolean` Por defecto `false`	Dos pulgares para elegir un rango. Se decide al montar el componente y no cambia después.
`min?` `number` Por defecto `0`	Valor mínimo.
`max?` `number` Por defecto `100`	Valor máximo.
`step?` `number` Por defecto `1`	Paso entre dos valores: lo que avanza cada flecha y la grilla a la que se ajusta el arrastre.
`label?` `string`	Texto visible encima del riel, con el aspecto de la etiqueta de `Field`. Nombra a cada pulgar con `aria-labelledby`.
`aria-label?` `string`	Nombre del slider cuando no hay texto visible; si otro texto de la página ya lo nombra, `aria-labelledby` con su id. Hace falta uno de `label`, `aria-label` o `aria-labelledby`: TypeScript rechaza un slider sin nombre.
`format?` `(value: number) => string`	Cómo se escribe un valor en pantalla («62 %»). Es también el `aria-valuetext` de cada pulgar, salvo que `valueText` diga otra cosa.
`valueText?` `(value: number, index: number) => string`	El `aria-valuetext` de cada pulgar, cuando el anuncio necesita más que lo que se ve («3» en pantalla, «3 réplicas» en el lector). `index` es 0 o 1 en un rango.
`showValue?` `boolean` Por defecto `true`	Muestra el valor en mono a la derecha del texto; en un rango, «desde – hasta». Es un `<output>` que no se anuncia: cada pulgar ya anuncia su valor.
`thumbLabels?` `[string, string]` Por defecto `['mínimo', 'máximo']`	Solo con `range`: lo que distingue a cada pulgar en su nombre, después del nombre del slider («Precio mínimo»).
`onValueChange?` `(value) => void`	Se llama con cada cambio, también mientras se arrastra. Si un `bind:value` de función rechaza el cambio, no se llama y el pulgar no se mueve.
`onValueCommit?` `(value) => void`	Se llama al soltar el pulgar o después de cada tecla. Úsalo para guardar o pedir datos, no en cada movimiento.
`disabled?` `boolean` Por defecto `false`	Deshabilita el slider: sale del orden de tabulación y no responde al puntero.
`name?` `string`	Nombre del campo en el formulario: un input oculto por pulgar. Sin `name` no se envía.
`class?` `ClassValue`	Clases del producto; se suman a `arche-slider`, el contenedor.
`...rest` `HTMLAttributes<HTMLDivElement>`	`id`, `style` y `data-*` van al contenedor; `aria-describedby` va a cada pulgar.

Accesibilidad

Cada pulgar es un role="slider" de Bits UI con aria-valuemin, aria-valuemax y aria-valuenow. Con format o valueText, además aria-valuetext, así el lector dice «60 %» o «3 réplicas» y no solo el número.
Flechas: un paso. Inicio y Fin: el mínimo y el máximo. En un rango, cada pulgar es una parada del tabulador y los dos se nombran por separado («Precio mínimo», «Precio máximo»).
En un rango, los límites de cada pulgar llegan hasta el otro, como pide el patrón de slider multipulgar de la APG: el aria-valuemax del mínimo es el valor del máximo y el aria-valuemin del máximo es el valor del mínimo. Con el teclado es exactamente lo que hacen Inicio, Fin y las flechas: cada pulgar se detiene en el valor del otro y el foco no cambia de pulgar. Con el puntero, arrastrar un pulgar más allá del otro los ordena, y los límites se actualizan.
El valor visible es un <output> con aria-live="off": el pulgar ya anuncia cada cambio y la salida lo repetiría.
El pulgar mide 20 px y su objetivo 28 px; toda la franja de 28 px de alto responde al puntero. El foco es el de Arche, sobre el pulgar, con el halo sumado al brillo de la selección.
El riel es oscuro (bg) con un borde de 1 px en border-control, y el aro del pulgar es el color de selección: los dos llegan a 3:1 contra todas las capas. El tramo elegido llega a 3:1 contra el interior del riel en todos los productos (20:1 en Arche, 7,77:1 en el producto de ejemplo) y se distingue también por su posición entre el inicio y el pulgar.
En colores forzados, el riel es Canvas con borde CanvasText, el tramo Highlight y el pulgar un aro Highlight.

Qué evitar

Un slider para un valor exacto que la persona ya conoce (un puerto, una cantidad de 1 a 1000). Un Input numérico: escribir es más rápido y preciso.
Un slider sin el valor a la vista. Deja showValue; si lo ocultas, el valor tiene que estar en otro lugar de la página.
Guardar o pedir datos en cada onValueChange mientras se arrastra. onValueCommit, que llega al soltar.
Un paso tan chico que el riel tenga cientos de valores. Un step que tenga sentido para la decisión (5 %, 10 US$).