Slider

Control deslizante para seleccionar un valor dentro de un rango.

---

Import

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

---

Uso básico

<Slider defaultValue={[50]} max={100} step={1} />

El valor siempre es un array porque soporta rangos (dos handles).

---

Con label

<div className="space-y-2">
  <Label>Volumen</Label>
  <Slider defaultValue={[70]} max={100} step={1} />
</div>

---

Rango con dos handles

<Slider defaultValue={[25, 75]} max={100} step={5} />

Útil para filtros de precio, edad, fechas, etc.

---

Con marcas

<div className="space-y-3">
  <Slider defaultValue={[3]} max={5} step={1} />
  <div className="flex justify-between text-xs text-muted-foreground">
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
    <span>5</span>
  </div>
</div>

---

Controlado

import { useState } from 'react';
import { Slider } from '@imansi/ui';

export function SelectorPrecio() {
  const [precio, setPrecio] = useState([50]);

  return (
    <div className="space-y-4">
      <Slider value={precio} onValueChange={setPrecio} max={200} step={10} />
      <p className="text-sm text-muted-foreground">
        Precio máximo: ${precio[0]}
      </p>
    </div>
  );
}

---

Deshabilitado

<Slider defaultValue={[50]} disabled />

---

Props

Prop	Tipo	Default	Descripción
value	number[]	—	Valor controlado
defaultValue	number[]	[0]	Valor inicial
onValueChange	(value: number[]) => void	—	Callback al cambiar
min	number	0	Valor mínimo
max	number	100	Valor máximo
step	number	1	Incremento entre valores
disabled	boolean	false	Deshabilita el slider
className	string	—	Clases adicionales

---

Accesibilidad

• Navegable con Tab
• Flechas ← → para ajustar
• Home / End para ir a los extremos
• Page Up / Page Down para saltos grandes
• role="slider" con aria-valuenow, aria-valuemin, aria-valuemax