UIDeslizador
Un deslizador para un valor en una escala donde importa más la posición que el número exacto.
Un deslizador elige un valor entre un mínimo y un máximo arrastrando. Úsalo cuando el usuario compara posiciones (volumen, opacidad, una nota de corte) y muestra el número a su lado, porque un deslizador no es preciso.
Cuándo usarlo
Úsalo
- Define
min,maxysteppara que los valores tengan sentido. - Muestra el valor actual junto al deslizador.
- Una etiqueta, enlazada con
foreid.
No
- Usarlo para un valor que el usuario debe escribir exacto; usa un campo numérico.
- Usarlo para unas pocas opciones con nombre; usa radios.
- Redibujar el riel o el tirador en un plugin.
Anatomía
Un deslizador tiene una etiqueta, un riel y un tirador. El valor no lo dibuja el control: escríbelo a su lado.
Variantes y estados
Esta versión de Moodle no tiene modo oscuro: los ejemplos se quedan en claro.
Esta versión de Moodle no tiene modo oscuro: los ejemplos se quedan en claro.
Combinaciones
| Combinación | Para qué usarla |
|---|---|
| Deslizador + valor | Muestra el número junto al deslizador; un deslizador solo no es preciso. |
| Deslizador + campo numérico | Cuando a veces hace falta el valor exacto, pon un campo numérico al lado. |
| Deslizador × desactivado | El tirador se vuelve gris y el riel se queda, así que el valor sigue siendo legible. |
Qué cambia Didactika y por qué
| Qué cambiamos | Por qué ayuda |
|---|---|
| Un riel fino y redondeado y un tirador redondo con borde blanco | El tirador se ve sobre cualquier color de riel y es lo bastante grande para agarrarlo. |
| El tirador es del color primario y gana un anillo al enfocar | Quien usa el teclado ve qué deslizador tiene el foco y dónde está el tirador. |
Clases
| Clase | Qué hace |
|---|---|
form-rangecustom-range |
El deslizador |
min, max, step |
Atributos de la escala |
En esta versión
Bootstrap 5.3 dibuja el foco como un anillo suave y guarda cada color en variables CSS (--bs-*), así que un tema recolorea un control con una sola variable. El tirador y el riel siguen el color del tema.
Bootstrap 4.6 dibuja el foco como una sombra de color y compila los colores de cada control, así que un tema lo recolorea recompilando su hoja de estilos. La clase es custom-range.
Bootstrap 4.6 dibuja el foco como una sombra de color y compila los colores de cada control, así que un tema lo recolorea recompilando su hoja de estilos. La clase es custom-range.
Accesibilidad
- Flechas, Inicio, Fin y Re Pág/Av Pág funcionan en el elemento nativo.
- Los lectores de pantalla leen el valor; si además lo muestras, márcalo
aria-hiddeno enlázalo conaria-describedby. - No dependas solo de arrastrar: permite un camino con teclado.