Slider

Selecciona un valor dentro de un rango con el control nativo input[type=range]. Fill de marca, teclado con flechas.

Preview principal

SLIDERrange · teclado

Volumen60%

Brillo40%

Pasos

step controla el incremento (aquí de 10).

Zoom20

Rango acotado

min / max personalizados (1–5).

Prioridad3 / 5

Deshabilitado

disabled: no interactivo, fill visible.

Bloqueado70%

No controlado

defaultValue + estado interno (sin value).

Umbral50

callback: 50

Uso

import { useState } from "react";
import { Slider } from "devsoftec-ui";

function Ejemplo() {
  const [volume, setVolume] = useState(60);

  return (
    <Slider
      min={0}
      max={100}
      value={volume}
      onChange={setVolume}
      aria-label="Volumen"
    />
  );
}

Props

Prop	Tipo	Default	Descripción
min	number	0	Mínimo
max	number	100	Máximo
step	number	1	Incremento
value	number	—	Valor (controlada)
defaultValue	number	(min+max)/2	Valor inicial (no controlada)
onChange	(value: number) => void	—	Al cambiar
disabled	boolean	—	No interactivo

Acepta el resto de attrs de input (aria-label, id, name, …).

Comportamiento

• input type="range" nativo (flechas / PageUp-PageDown)
• Fill via --ds-slider-fill (WebKit gradient + ::-moz-range-progress)
• Controlada (value) o no controlada (defaultValue + estado interno)
• Pasa aria-label (o <label>) — el valor solo no basta como nombre accesible