Componentes Slider de valor
El slider de valor permite elegir un número o un rango arrastrando una manija sobre una barra. En Material Design se llama simplemente "Slider". No confundir con un carrusel.
Úsalo cuando el usuario elige un valor dentro de un rango conocido y le sirve ver el efecto de inmediato. Si el valor exacto es lo más importante, como una cédula o un monto a transferir, usa un campo de texto.
En diseño web, slider casi siempre significa carrusel: diapositivas que pasan una tras otra. En Material Design y en los formularios, Slider es el control para elegir un valor arrastrando una manija (volumen, precio). Esta guía cubre los dos: los carruseles en la sección Carruseles y el control en Slider de valor.
Material 01
El valor cambia de forma suave a lo largo de toda la barra. No muestra números exactos mientras se arrastra.
Úsalo para: valores aproximados donde importa la sensación: volumen, brillo, saturación.
Evítalo si: el usuario necesita un número exacto.
Material 02
Solo permite valores fijos, marcados con pequeñas rayas sobre la barra. Al arrastrar aparece una etiqueta con el valor exacto.
Úsalo para: valores con pasos definidos: calificación de 0 a 5, número de cuotas, nivel de dificultad.
Evítalo si: hay más de 10 o 12 pasos: las marcas se amontonan.
Variante 03
Dos manijas sobre la misma barra marcan un mínimo y un máximo. Puede ser continuo o discreto.
Úsalo para: filtros de precio, rangos de fecha o de edad.
Evítalo si: los extremos deben ser exactos y largos: dos campos de texto son más precisos.
Variante 04
Íconos a los lados indican qué significa cada extremo (menos y más). Ayudan cuando no hay etiqueta de texto.
Úsalo para: reproductores, configuraciones rápidas.
Evítalo si: los íconos no son obvios.
| Acción | Resultado |
|---|---|
| Arrastrar la manija | Cambia el valor; en discreto salta a la marca más cercana |
| Tocar un punto de la barra | La manija salta a ese punto |
| Flechas del teclado | Sube o baja un paso |
| Inicio / Fin | Va al mínimo / máximo |
| Re Pág / Av Pág | Salta varios pasos |
| Medida | App (dp / pt) | Web (px CSS) |
|---|---|---|
| Alto de la barra | 4 | 4–6 |
| Manija | 20 de diámetro | 16–20 |
| Área táctil de la manija | 48 × 48 (Android) / 44 × 44 (iOS) | mín. 24 × 24, ideal 44 |
| Marcas (discreto) | 2 de diámetro | 2–4 |
| Etiqueta de valor | aprox. 28–32 de alto | 28–32 |
| Ancho mínimo recomendado | al menos 5 veces el ancho de la manija | mín. 120 px |
Medidas de referencia de Material 2. Verifícalas en la página original antes de evaluarlas; Material 3 cambió el diseño (barra más gruesa y manija vertical).
<label for="brillo">Brillo</label>
<input type="range" id="brillo" min="0" max="100" step="1" value="60">
<!-- Discreto: step define los saltos y list las marcas -->
<input type="range" min="0" max="5" step="1" value="4" list="marcas">
<datalist id="marcas">
<option value="0"></option><option value="1"></option> ...
</datalist><input type="range"> ya funciona con teclado y lector de pantalla.
Asocia un <label> o usa aria-label. En rangos, nombra cada manija: "Precio mínimo".
Si el número solo no se entiende, usa aria-valuetext: "120 mil pesos".