Esta traducción está incompleta. Por favor, ayuda a traducir este artículo del inglés.

El elemento <input> del tipo "range" permite que el usuario especifique un valor numérico comprendido entre un valor mínimo y máximo. El valor exacto, sin embargo, no se considera importante. Se repesenta típicamente como un "tirador" o un control deslizante en lugar de un campo de texto como otros tipos de <input>. Como este tipo de widget es bastante inmpreciso, no debe utilizarse normalmente a menos que el valor exacto del control no sea importante.

<input type="range">

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

Value Un DOMString que contiene la cadena que representa el valor numérico seleccionado; use valueAsNumber to get the value as a Number.
Eventos change e input
Atributos comunes soportados autocomplete, list, max, min y step
Atributos IDL list, value y valueAsNumber
Metodos stepDown() y stepUp()

Value

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.

Usando inputs range

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".

Especificar los valores mínimo y máximo

Por devecto, 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">

Definir el tamaño de los saltos

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">

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.

Añadir marcas y etiquetas

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 Captura de pantalla
<input type="range">
Screenshot of a plain slider control on macOS
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 Captura de pantalla
<input type="range" list="tickmarks">

<datalist id="tickmarks">
  <option value="0">
  <option value="10">
  <option value="20">
  <option value="30">
  <option value="40">
  <option value="50">
  <option value="60">
  <option value="70">
  <option value="80">
  <option value="90">
  <option value="100">
</datalist>
Screenshot of a plain slider control on macOS
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 Captura de pantalla
<input type="range" list="tickmarks">

<datalist id="tickmarks">
  <option value="0" label="0%">
  <option value="10">
  <option value="20">
  <option value="30">
  <option value="40">
  <option value="50" label="50%">
  <option value="60">
  <option value="70">
  <option value="80">
  <option value="90">
  <option value="100" label="100%">
</datalist>
Screenshot of a plain slider control on macOS

Nota: Actualmente, ningún navegador soporta todas estas características. Firefox no soporta ni marcas ni etiquetas, mientras que Chrome soporta las marcas pero no las etiquetas.

Cambiar la orientación

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.

Result

ScreenshotLive sample

Validación

 
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.

Ejemplos

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

Especificaciones

Especificación Estatus Comentario
HTML Living Standard
La definición de '<input type="range">' en esta especificación.
Living Standard Definición inicial
HTML 5.1
La definición de '<input type="range">' en esta especificación.
Recommendation Definición inicial

Compatibilidad en navegadores

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support 4.0[2] 12 23 (23)[1][4] 10 10.1 3.1
Feature Android Chrome for Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 2.1[3] 57[2] (Yes) 52.0 (52)[1] 10 (Yes) 5.1

[1] A pesar de que la especificación dice que el input range debe mostrarse verticalmente si el alto es mayor que el ancho, este comportamiento no está implementado actualmente. Mira los siguientes bugs para conocer más información: error 840820 y error 981916.

[2] Chrome implementa el valor slider-vertical con la propiedad no estandard -webkit-appearance. No deberías usarla ya que es propietaria, a menos que incluyas fallbacks para usuarios de otros navegadores.

[3] El navegador de Android reconoce el tipo "range" desde la versión 2.1, pero no está totalmente implementada hasta la versión 4.3.

[4] Dibujar marcas y etiquetas no está aún implementado. Ver error 841942 para conocer más información.

Ver también

Etiquetas y colaboradores del documento

Colaboradores en esta página: Luis_Calvo
Última actualización por: Luis_Calvo,