Slider

Control deslizante para seleccionar un valor o rango

Componente slider construido con Ark UI. Usa la API de conveniencia con defaultValue (array para valor único o rango) o la API compuesta para layout personalizado y varios thumbs.

Volumen

import { Slider } from "@/components/ui/slider";

export default function Example() {
  return (
    <Slider defaultValue={[50]} min={0} max={100} label="Volumen" />
  );
}

View Code

Instalación

bash

liminal add slider

Uso

Pasa defaultValue como array (ej. [50] para un valor, [20, 80] para rango), además de min, max y opcionalmente step y label.

<Slider defaultValue={[30]} min={0} max={100} />

View Code

Ejemplos

Con etiqueta

Brillo

<Slider defaultValue={[60]} min={0} max={100} label="Brillo" />

View Code

Slider de rango (API compuesta)

Para un rango (dos thumbs), usa la API compuesta con dos SliderThumb (index 0 y 1).

tsx

import {
  SliderRoot,
  SliderLabel,
  SliderControl,
  SliderTrack,
  SliderRange,
  SliderThumb,
} from "@/components/ui/slider";

export default function Example() {
  return (
    <SliderRoot defaultValue={[25, 75]} min={0} max={100}>
      <SliderLabel>Rango</SliderLabel>
      <SliderControl>
        <SliderTrack>
          <SliderRange />
        </SliderTrack>
        <SliderThumb index={0} />
        <SliderThumb index={1} />
      </SliderControl>
    </SliderRoot>
  );
}

API

Prop	Type	Default	Description
defaultValue	number[]	-	Valor(es) inicial(es), ej. [50] o [20, 80] para rango.
value	number[]	-	Valor(es) controlado(s).
min	number	0	Valor mínimo.
max	number	100	Valor máximo.
step	number	1	Incremento por paso.
label	React.ReactNode	-	Etiqueta accesible (API de conveniencia).
onValueChange	(details: { value: number[] }) => void	-	Callback cuando cambia el valor.