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.