<input type="range">

<input type="range" />

Si el navegador del usuario no soporta el tipo "range", será tratado como un input de tipo "text".

El atributo value contiene un DOMString que es la representación de tipo cadena del número seleccionado. El valor nunca es una cadena vacía (""). El valor por defecto es el punto intermedio entre los valores mínimo y máximo especificados, a menos que el valor máximo sea menor que el valor mínimo, en cuyo caso el valor por defecto será el valor del atributo min. El algoritmo de determina el valor por defecto es:

defaultValue =
  rangeElem.max < rangeElem.min
    ? rangeElem.min
    : rangeElem.min + (rangeElem.max - rangeElem.min) / 2;

Si se intenta establecer un valor inferior al mínimo definido, el valor será igual al mínimo. De manera similar, un intento de establecer un valor superior al máximo da como resultado el valor máximo.

El input de tipo "number" permite al usuario introducir un número y, opcionalmente, forzarle a que dicho valor se encuentre entre un mínimo y un máximo, pero le obliga a introducir un valor específico. El input de tipo "range" pide al usuario que indique el valor en un rango numérico sin que tenga que preocuparse qué valor numérico específico está seleccionado.

Los ejemplos títpicos de situaciones en las que se pueden usar inputs de tipo rango suelen ser:

• Controles de audio (volumen o balance) o controles de filtro.
• Configuración de color, como canales, transparencia, brillo, etc.
• Controles de configuración de juegos, como dificultad, distancia de visibilidad, tamaño del nunodGame configuration controls such as difficulty, visibility distance, world size, etc.
• Longitud de contraseñas para un gestor de contraseñas generadas.

Como regla general, si el usuario está más interesado en la distancia entre un mínimo y un máximo más que en el propio valor en sí mismo, el input de tipo rango es el candidato perfecto. Por ejemplo, en el caso del control del volumen de un equipo estéreo, el usuario normalmente piensa "pon el volumen a la midad" en lugar de "pon el volumen al 0,5".

Por defecto, el valor mínimo es 0 y el máximo es 100. Si es necesario modificar dichos valores, podemos usar los atributos min y/o max. Podemos usar cualquier valor de coma flotante.

Por ejemplo, para usar un rango entre -10 y 10, usaremos:

<input type="range" min="-10" max="10" />

Por defecto, cada salto tiene valor 1, es decir el valor será siempre un número entero. Podemos cambiarlo mediante el atributo step. Si necesitas, por ejemplo, un valor entre 5 y 10 con una precisión de dos decimales, debes indicar que el valor de step es 0.01:

<input type="range" min="5" max="10" step="0.01" />

Valor any

Si quieres aceptar cualquier valor independientemente de la cantidad de decimales, puede especificar un valor de "any" al atrtibuto step:

<input type="range" min="0" max="3.14" step="any" />

En el ejemplo, permitimos al usuario seleccionar cualquier valor entre 0 y π sin restricciones en la parte decimal del número seleccionado.

La especificación HTML permite a los navegadores cierta flexibilidad sobre cómo presentar el control range. En ningún sitio es más notoria dicha flexibilidad como a la hora de representar las marcas y las etiquetas de un rango. La especificación describe cómo añadir puntos personalizados al control range usando el atributo list y el elemento <datalist>, pero no hay requisitos o recomendaciones de estandarizar las marcas a lo largo del control.

Mockups del control range

Como los navegadores tienen esta flexibilidad, y hasta la fecha ninguno admite todas las funciones que HTML define para los controles range, a continuación mostramos algunas maquetas que permiten conocer lo que puede visualizarse en macOS en un navegador que las admita.

El control rango sin adornos

Cuando no especificas un atributo list al input range, un navegador que lo soporte mostrará lo siguie.

HTML

<input type="range" />

Captura de pantalla

Un control rango con marcas

El siguiente rango utiliza el atributo list (al cual le especificamos el ID del elemento <datalist>) para definir la serie de marcas del rango. Hay once marcas, cada una de ellas mide un 10%, representadas por el value de cada elemento <option>.

HTML

<input type="range" list="tickmarks" />

<datalist id="tickmarks">
  <option value="0"></option>
  <option value="10"></option>
  <option value="20"></option>
  <option value="30"></option>
  <option value="40"></option>
  <option value="50"></option>
  <option value="60"></option>
  <option value="70"></option>
  <option value="80"></option>
  <option value="90"></option>
  <option value="100"></option>
</datalist>

Captura de pantalla

Un control rango con marcas y etiquetas

Puedes añadir etiquetas a tu control range usando el atributo label al elemento <option> correspondiente a cada marca que desees etiquetar.

HTML

<input type="range" list="tickmarks" />

<datalist id="tickmarks">
  <option value="0" label="0%"></option>
  <option value="10"></option>
  <option value="20"></option>
  <option value="30"></option>
  <option value="40"></option>
  <option value="50" label="50%"></option>
  <option value="60"></option>
  <option value="70"></option>
  <option value="80"></option>
  <option value="90"></option>
  <option value="100" label="100%"></option>
</datalist>

Captura de pantalla

Por defecto, si un navegador renderiza un input range, lo mostrará como un "slider" (deslizador) que se desliza hacia la izquierda y hacia la derecha. By default, if a browser renders a range input as a slider, it will render it so that the knob slides left and right. Sin embargo puedes cambiar esto fácilmente para que se deslice hacia arriba y hacia abajo simplemente usando CSS

Control de rango horizontal

Si tenemos el siguiente control range:

<input type="range" id="volume" min="0" max="11" value="7" step="1" />

Dicho control se muestra en horizontal (al menos en los principales navegadores, o otros puede variar).

Usando la propiedad de appearance

La propiedad appearance tiene un valor no estándar de slider-vertical que, bueno, hace que los controles deslizantes sean verticales.

Usamos el mismo HTML que en los ejemplos anteriores:

<input type="range" min="0" max="11" value="7" step="1" />

Nos dirigimos solo a las entradas con un tipo de rango:

input[type="range"] {
  appearance: slider-vertical;
}

Control de rango vertical

La especificación HTML recomienda que los navegadores cambien la orientación del range si el ancho especificado es menor que el alto. Desafortunadamente, ninguno de los principales navegadores soportar controles range verticales directamente. Para conseguir un range vertical, la forma más fácil es usar CSS, aplicando transform para rotar el elemento y mostrarlo en vertical. Veamos cómo.

HTML

El HTML necesita que el elemento <input> esté dentro de un elemento <div> :

<div class="slider-wrapper">
  <input type="range" min="0" max="11" value="7" step="1" />
</div>

CSS

Ahora necesitamos un poco de CSS. Primero escribimos el CSS del div contenedor; especificamos el modo de display y el tamaño que queremos que tenga, reservando un área en la página para el "slider" que vamos a rotar.

.slider-wrapper {
  display: inline-block;
  width: 20px;
  height: 150px;
  padding: 0;
}

Después ponemos la información para el elemento <input>:

.slider-wrapper input {
  width: 150px;
  height: 20px;
  margin: 0;
  transform-origin: 75px 75px;
  transform: rotate(-90deg);
}

El tamaño del range es 150 pixeles de ancho por 20 pixeles de alto. Ponemos los márgenes a 0 y con transform-origin cambiamos centro que usaremos para rotar el range. Como el input mide 150 pixeles de ancho y largo, girará en una cuadrado de 150 pixeles de lado. Colocamos el centro de giro a 75px horizontal y verticalmente y, finalmente, rotamos 90º en sentido contrario a las agujas del reloj. El resultado final es un input range que ha girado y cuyo valor máximo está en la parte superior y el valor mínimo en la parte inferior.

Resultado

No hay un patrón de validación disponible; sin embargo, se realizan las siguientes formas de validación automática:

• Si el value está configurado con un valor que no se puede convertir en un número de coma flotante válido, la validación falla porque recibe una entrada incorrecta.
• El valor no puede ser menor que el valor de min. Por defecto es 0.
• El valor no puede ser mayor que el max. Por defecto es 100.
• El valor será un múltiplo del valor de step. Por defecto es 1.

Además de los ejemplos anteriores, encontrarás más ejemplos en los siguientes artículos:

• Controlling multiple parameters with ConstantSourceNode

• HTML Forms
• <input> and the HTMLInputElement interface it's based upon
• <input type="number">