Slider

Permite elegir un valor numérico dentro de un rango continuo o discreto. Es preferible cuando la precisión exacta no importa tanto como la dirección y la magnitud relativa.

Valor actual: 40

Default

Cuándo usar

  • Ajustes continuos como volumen, zoom u opacidad.
  • Rangos numéricos cortos donde la magnitud es intuitiva.
  • Cuando un input numérico te resulta excesivo para el dato.

Cuándo no usarlo

  • Si necesitas precisión exacta: usa un input numérico.
  • Si solo hay dos o tres valores: usa Radio o Switch.

Pasos

Slider discreto

Usa step y showMarkers cuando el dominio tiene incrementos significativos: una escala de 1 a 5, porcentajes de 10 en 10, etc.

Valor actual: 20

Deshabilitado

Estado bloqueado

Cuando el ajuste no aplica en el contexto actual, deshabilita el slider y muestra una explicación cercana de por qué.

Accesibilidad

Teclado y roles

  • Radix renderiza role="slider" con aria-valuenow, aria-valuemin y aria-valuemax.
  • Flechas izquierda y derecha mueven uno o un step; Home y End van al mínimo y al máximo.
  • El slider necesita un label visible o aria-labelledby.
  • Acompaña con un texto que muestre el valor actual en vivo.

Contenido

Etiquetas de los extremos

  • Si la escala no es obvia, anota los extremos: Bajo y Alto, 0 y 100.
  • Una a tres palabras por extremo.
  • Muestra el valor seleccionado cerca del slider, no en un tooltip que aparece y desaparece.