componentes / slider

Slider

Elige un número o un intervalo arrastrando el botón o usando el teclado.

Cómo usar

El valor es siempre un array, un número por botón: `[40]` para un valor, `[20, 80]` para un intervalo con la pista rellena entre los botones. El Slider no muestra el número elegido, así que muéstralo junto al control. Ponle nombre con `aria-label` (obligatorio) y, en un intervalo, a cada botón con `thumbLabels`.

preview

Volumen: 40%

Precio: $200 – $800

Slider.tsx

import { Slider } from "vaiperui";
 
const [volume, setVolume] = useState([40]);
const [price, setPrice] = useState([200, 800]);
 
<p>Volumen: {volume[0]}%</p>
<Slider aria-label="Volumen" value={volume} onValueChange={setVolume} />
 
<Slider
  aria-label="Precio"
  thumbLabels={["Precio mínimo", "Precio máximo"]}
  value={price}
  onValueChange={setPrice}
  min={0}
  max={1000}
  step={10}
/>

Colores

preview

primary

success

warning

danger

colores.tsx

<Slider aria-label="primary" variantColor="primary" defaultValue={[50]} />
<Slider aria-label="success" variantColor="success" defaultValue={[50]} />
<Slider aria-label="warning" variantColor="warning" defaultValue={[50]} />
<Slider aria-label="danger" variantColor="danger" defaultValue={[50]} />

Tamaños

preview

tamanos.tsx

<Slider aria-label="sm" size="sm" defaultValue={[50]} />
<Slider aria-label="md" size="md" defaultValue={[50]} />
<Slider aria-label="lg" size="lg" defaultValue={[50]} />

Intervalo

Dos valores dan dos botones, con la pista rellena entre ellos. `minStepsBetweenThumbs` mantiene una distancia mínima.

preview

[20, 80]

minStepsBetweenThumbs 10

intervalo.tsx

<Slider aria-label="..." defaultValue={[20, 80]} />
<Slider aria-label="..." defaultValue={[30, 70]} minStepsBetweenThumbs={10} />

Pasos

preview

step 25

pasos.tsx

<Slider aria-label="..." step={25} defaultValue={[50]} />

Deshabilitado

preview

deshabilitado

estados.tsx

<Slider aria-label="..." defaultValue={[30]} disabled />

Color personalizado

preview

Naranja

color-personalizado.tsx

<Slider aria-label="..." customColor="#ff6600" defaultValue={[40]} />

Props

Prop	Valores	Predeterminado	Descripción
value / defaultValue	number[]	[min]	Valores, controlados o iniciales: un número por botón
onValueChange	(value: number[]) => void	ninguno	Se llama mientras el botón se mueve
onValueCommit	(value: number[]) => void	ninguno	Se llama al soltar el botón o terminar una tecla. Úsalo para pedir datos solo al final
min / max	number	0 / 100	Límites del intervalo
step	number	1	Paso entre valores
minStepsBetweenThumbs	number	0	En un intervalo, la distancia mínima entre botones, en pasos
disabled	boolean	false	Bloquea el uso
name	string	ninguno	Nombre del campo del formulario; cada botón envía su valor con él
aria-label	string	obligatorio	Nombre accesible. Con varios botones se añade un número
thumbLabels	string[]	ninguno	Nombre accesible de cada botón, en lugar del aria-label numerado
variantColor	primary \| success \| warning \| danger	primary	Color del estado marcado y del anillo de foco
customColor	string \| { light, dark }	ninguno	Cualquier color CSS (o un par por tema). Reemplaza a variantColor
size	sm \| md \| lg	md	Tamaño del control y del texto
animation	none \| smooth \| fast \| bounce	smooth	Transición al alternar

Accesibilidad

Cada thumb es un `<div role="slider">` (no un input nativo) con `aria-valuemin`, `aria-valuemax`, `aria-valuenow` y `aria-orientation="horizontal"`.
`aria-label` es obligatorio. Con varios thumbs se añade un número ("Precio 1", "Precio 2"), o usa `thumbLabels` para nombres propios.
Cada thumb es una parada de Tab (`tabIndex=0`); un thumb nunca cruza a su vecino y `minStepsBetweenThumbs` mantiene una separación entre ellos.
Con `disabled`, los thumbs reciben `aria-disabled="true"` y `tabIndex=-1`, y el control ignora puntero y teclado.
Pulsar la pista enfoca el thumb más cercano; `name` añade un input hidden por thumb para el envío de formularios.

Teclado

Tecla	Acción
Arrow Right / Up	Aumentan un `step`.
Arrow Left / Down	Disminuyen un `step`.
Page Up / Page Down	Cambian 10 steps.
Home / End	Van a `min` / `max` (limitado por los thumbs vecinos).

Ten en cuenta

`aria-valuetext` no se define, así que los lectores de pantalla anuncian el número crudo; si necesita unidad, inclúyela en el `aria-label`.
Arrastrar es solo con puntero; quien usa teclado depende de las teclas anteriores. No hay soporte para `aria-labelledby`, solo `aria-label`.