PrimitiveDisponible
Slider
Control de rango numérico con incrementos por teclado y valor visible.
Instalación
Agrega el componente y sus dependencias desde el registro que está ejecutándose en tu computadora.
terminal
npx shadcn@latest add https://brutallab.facilito.dev/r/slider.jsonUso
Importa el componente en tu proyecto y conserva el código bajo tu control.
tsx
'use client';
import { useState } from 'react';
import { Slider } from '@/components/ui/slider';
export default function Demo() {
const [value, setValue] = useState([40]);
return (
<div className="grid w-full max-w-md gap-4">
<p id="volume-label" className="bl-type-label">
Volume: {value[0]}%
</p>
<Slider
value={value}
onValueChange={(next) => setValue(Array.isArray(next) ? next : [next])}
min={0}
max={100}
step={5}
aria-labelledby="volume-label"
/>
</div>
);
}
Estados e interacción
Aspecto, comportamiento y comprobación con teclado.
- Documenta el valor inicial, seleccionado, deshabilitado y foco. La selección cambia el indicador o la posición, además del color.
- Usa Espacio para activar botones de selección; las flechas cambian radios y sliders. Checkbox admite un estado mixto.
- Prueba el ejemplo con Tab y Shift+Tab. El foco debe seguir visible en ambos temas.
Referencia API
Propiedades propias de BrutalLab. También acepta los atributos nativos correspondientes.
| Prop | Tipo | Default | Descripción |
|---|---|---|---|
| value | number[] | uncontrolled | Controlled thumb values. |
| min / max | number | 0 / 100 | Bounds. |
| step | number | 1 | Keyboard and pointer increment. |
| thumbLabels | string[] | Value 1? | Accessible names for individual thumbs; aria-labelledby takes precedence. |
Accesibilidad
Reglas que deben conservarse cuando el componente se adapte a un producto.
Conserva las etiquetas visibles y el HTML semántico del ejemplo.
Mantén el foco visible y comprueba la composición mediante el teclado.
Personaliza el aspecto con className sin reemplazar los atributos ARIA de la primitiva.