Cómo establecer el valor máximo y mínimo en un input de tipo range
En HTML, los elementos de entrada (<input>) de tipo range permiten a los usuarios seleccionar un valor dentro de un rango definido. Para establecer los valores máximo y mínimo de este rango, se utilizan los atributos min y max.
Cómo funcionan los atributos min y max en un input de tipo range
El atributo min define el valor más bajo que el usuario puede seleccionar, mientras que max establece el valor más alto. Ambos atributos deben configurarse como valores numéricos en el elemento <input>.
Por ejemplo:
<input type="range" min="0" max="100" step="1">En este caso:
-
min="0": el valor mínimo es 0. -
max="100": el valor máximo es 100. -
step="1"(opcional): define el incremento entre los valores seleccionables.
Ejemplo práctico
A continuación, se muestra un ejemplo donde se establece un rango entre 10 y 50, con incrementos de 5:
<label for="volume">Nivel de volumen:</label>
<input type="range" id="volume" name="volume" min="10" max="50" step="5">Explicación del ejemplo:
- El usuario puede seleccionar un valor entre 10 y 50.
- Los valores seleccionables avanzan en pasos de 5 (10, 15, 20, etc.).
Tabla de atributos relevantes
| Atributo | Descripción | Ejemplo |
|---|---|---|
min
|
Define el valor mínimo seleccionable. |
min="10"
|
max
|
Define el valor máximo seleccionable. |
max="50"
|
step
|
Opcional. Define el intervalo entre valores. |
step="5"
|
Algunos ejemplos útiles
1. Control de volumen:
<input type="range" min="0" max="100" step="10">Este rango permite ajustar el volumen en pasos de 10 desde 0 hasta 100.
2. Selección de edad:
<input type="range" min="18" max="99">Selección de una edad mínima de 18 y máxima de 99 años.
Referencia oficial
Puedes encontrar más detalles en la documentación oficial de Mozilla sobre input type range.
Jorge García
Fullstack developer