Elemento input (type=range)

Si no sabes lo que es un elemento o cómo debes usarlo, te recomiendo leer el tutorial "Tags y atributos en HTML" que puedes encontrar en la sección de tutoriales HTML.

Descripción

El elemento input, teniendo el valor "range" en su atributo type, representa una campo para la entrada de un número dentro de un rango, con la salvedad de que la elección de un valor exacto no es importante. En los navegadores que soportan el mecanismo los campos de rango son habitualmente representados por algo similar a un deslizador, que se mueve entre los márgenes superior e inferior. Este control es una variante de la entrada numérica que puede desempeñarse mejor en situaciones específicas.

Previo al envío del formulario, los navegadores que soportan este mecanismo convierten la información ingresada a una cadena que representa un número. Las reglas para componer un número válido se describen a continuación.

Números

La sintaxis de un número está compuesta por:

  1. Opcionalmente un signo menos o carácter guión ("-").
  2. Uno o ambos de los siguientes, en el orden dado:
    1. Uno o más dígitos.
    2. Un carácter punto (".") seguido por uno o más dígitos.
  3. Opcionalmente:
    1. Una letra E (insensible a mayúsculas/minúsculas).
    2. Opcionalmente un signo menos o carácter guión ("-").
    3. Uno o más dígitos.

Ejemplo

468765
24.56
1.54e-31

El soporte provisto por los navegadores para campos de rango es incompleto. Para mejorar la compatibilidad, los autores pueden tener que recurrir a programas con el fin de proveer controles avanzados y validar los datos antes del envío.

Los atributos min y max pueden ser usados en este elemento para establecer los valores mínimo y máximo entre los cuales el deslizador podrá moverse.

Ejemplos

En el primer ejemplo crearemos solamente un formulario con un control de rango. Aquí podrás notar la funcionalidad provista por tu navegador (si la tiene) para el control.

<form action="../../form-result.php" method="post" target="_blank">
  <p>Volumen: <input type="range" name="volumen"> <input type="submit" value="Enviar datos"></p>
</form>

Volumen:

Ahora podemos comenzar a jugar con otros atributos. En este caso, estableceremos los atributos min y max para cambiar los valores que el usuario puede elegir. En nuestro ejemplo anterior no estaban presentes, de modo que el navegador utilizó los valores por defecto de 0 y 100 respectivamente.

Asimismo estableceremos el atributo step, permitiendo al usuario elegir sólo valores que sean múltiplos de 15. En este ejemplo, podrás ver como el deslizador "salta" de un valor al siguiente.

<form action="../../form-result.php" method="post" target="_blank">
  <p>
    Cantidad de rojo: <input type="range" name="red" min="0" max="255" step="15">
    <input type="submit" value="Enviar datos">
  </p>
</form>

Cantidad de rojo:

Por último, usaremos un datalist para proveer un conjunto de valores sugeridos para que el usuario los elija. Dependiendo de la implementación del navegador, algunas características pueden ser agregadas a la barra de desplazamiento, como puntos de captura (snapping) o etiquetas.

Recuerda que para enlazar un control con un elemento datalist, el atributo id en la lista debe coincidir con el atributo list en el control.

El soporte provisto por los navegadores para datalist es incompleto. Los autores pueden tener que recurrir a programas para proveer esta funcionalidad consistentemente.

<form action="../../form-result.php" method="post" target="_blank">
  <p>
    Nivel actual de cafeína en sangre: <input type="range" name="nivelcafeina" list="listanivelescafeina">
    <input type="submit" value="Enviar datos">
  </p>
</form>
<datalist id="listanivelescafeina">
  <option value="0" value="Alerta!">
  <option value="50" value="Bajo">
  <option value="100" value="Normal">
</datalist>

Nivel actual de cafeína en sangre:

Atributos

Atributos específicos

autofocus

Un valor booleano que instruye al navegador a establecer el enfoque sobre este control cuando el documento termina de cargarse o cuando el cuadro de diálogo (dialog) donde el control se encuentra es mostrado. Si el atributo tiene el valor "autofocus" o la cadena vacía (""), o si simplemente está presente, el control debería obtener el enfoque tan pronto como sea posible, luego de que la página o cuadro de diálogo hayan sido cargados.

Ejemplo

<p>Brillo: <input type="range" name="brillo" autofocus></p>

disabled

Un valor booleano que indica si el control se encuentra deshabilitado o no. Si el atributo toma el valor "disabled" o la cadena vacía (""), o si está simplemente presente, el control estará deshabilitado.

Los controles deshabilitados son representados en color gris (si son visibles), son impedidos para interactuar con el usuario y, lo más importante, sus valores (si lo tienen) no son enviados cuando el formulario es despachado.

Ejemplo

<form action="../../form-result.php" method="post" target="_blank">
  <p>
    Diversión esperada: <input type="range" name="diversion" disabled>
    <input type="submit" value="Enviar datos">
  </p>
</form>

Diversión esperada:

form

El valor del atributo id del formulario con el que este control está asociado.

Este atributo es nuevo en HTML5 y ayuda a definir la pertenencia de los controles en formularios anidados o distantes.

Ejemplo

<p>Energía: <input type="range" name="energia" form="formulario1"></p>
<form id="formulario1" action="../../form-result.php" method="post" target="_blank">
  <p><input type="submit" value="Enviar datos"></p>
</form>

Energía:

list

Un identificador que concuerda con el valor del atributo id del elemento datalist con el que este control está asociado. El datalist referenciado por este atributoproveerá un número de sugerencias que los usuarios pueden escoger para autocompletar el control.

El soporte provisto por los navegadores para datalist es incompleto. Los autores pueden tener que recurrir a programas para proveer esta funcionalidad consistentemente.

Los valores provistos por el elemento datalist deben acatar los requerimientos de las cadenas numéricas o estar compuestos por dos cadenas numéricas separadas por una coma (",").

Ejemplo

<form action="../../form-result.php" method="post" target="_blank">
  <p>
    Tamaño: <input type="range" name="tamaño" list="listatamanos">
    <input type="submit" value="Enviar datos">
  </p>
</form>
<datalist id="listatamanos">
  <option value="0" label="0%">
  <option value="25" label="25%">
  <option value="50" label="50%">
  <option value="75" label="75%">
  <option value="100" label="100%">
</datalist>

Tamaño:

max

El número máximo que el usuario debería estar habilitado para seleccionar. Los navegadores que soporten el mecanismo deberían impedir la selección de cualquier número superior a la especificada en este atributo.

El valor provisto por este atributo debe acatar los requerimientos de las cadenas numéricas.

Ejemplo

<form action="../../form-result.php" method="post" target="_blank">
  <p>
    Resultados esperados: <input type="range" name="resultadosesperados" max="10">
    <input type="submit" value="Enviar datos">
  </p>
</form>

Resultados esperados:

min

El número mínimo que el usuario debería estar habilitado para seleccionar. Los navegadores que soporten el mecanismo deberían impedir la selección de cualquier número inferior a la especificada en este atributo.

El valor provisto por este atributo debe acatar los requerimientos de las cadenas numéricas.

Ejemplo

<form action="../../form-result.php" method="post" target="_blank">
  <p>
    Nivel de luces: <input type="range" name="nivelluces" min="50">
    <input type="submit" value="Enviar datos">
  </p>
</form>

Nivel de luces:

name

Un nombre para el control. Este nombre será enviado por el navegador al agente procesador, emparejado con el contenido del atributo value. Ambos atributos juntos conformarán un par nombre-valor que será utilizado para procesar la información del formulario.

Actualmente, el valor isindex, antiguamente utilizado de manera especial por algunos navegadores e incluido en el estándar HTML, no está permitido en este atributo.

Ejemplo

<form action="../../form-result.php" method="post" target="_blank">
  <p>
    Pureza del aire: <input type="range" name="purezaaire">
    <input type="submit" value="Enviar datos">
  </p>
</form>

Pureza del aire:

step

Un número para ser usado como la cantidad de espacio entre un valor permitido y el siguiente. La presencia de este atributo reduce el número de opciones que tendrá el usuario al restringir la selección de valores intermedios.

El valor especial any quita la restricción por defecto sobre la granularidad del control y permite a los usuarios ingresar valores tan precisos como deseen.

Para evitar comportamientos inesperados, los autores deberían especificar un número para ser tomado como paso inicial. Esto puede hacerse mediante los atributos min y value. Cuando ambos están presentes, el atribtuo min tiene precedencia.

El valor provisto por este atributo debe acatar los requerimientos de las cadenas numéricas.

Ejemplo

<form action="../../form-result.php" method="post" target="_blank">
  <p>
    Que tan lejos llegaste: <input type="range" name="quetanlejos" step="10" min="0">
    <input type="submit" value="Enviar datos">
  </p>
</form>

Que tan lejos llegaste:

type

Un valor que indica el tipo de campo que representa este elemento. Existen veintidós valores posibles (insensibles a mayúsculas/minúsculas):

  • hidden: un control oculto utilizado para enviar información al servidor, típicamente manejado por programas.
  • text: un control usado para la entrada de una sola línea de texto.
  • search: igaul a text pero con fines de búsqueda.
  • tel: un control usado para proveer un número de teléfono.
  • url: una caja de texto usada para el ingreso de un único URL absoluto.
  • email: un control diseñado para editar una o más direcciones de e-mail.
  • password: una caja de texto para la edición de contraseñas, donde los caracteres son representados por puntos.
  • date: un control para ingresar una fecha específica.
  • month: un control para ingresar un mes específico.
  • week: un control para ingresar una semana específica.
  • time: un control para ingresar una hora específica.
  • datetime-local: un control para ingresar una fecha y hora local específica.
  • number: un control para ingresar un número.
  • range: un control para ingresar uno o dos números dentro de un rango.
  • color: un control para ingresar un color.
  • checkbox: un control para ingresar un valor booleano (verdadero/falso).
  • radio: un control para elegir una única opción entre varias.
  • file: un control usado para subir archivos al servidor.
  • submit: un botón usado para enviar el formulario.
  • image: igual a submit pero con la habilidad de verse como una imagen en lugar de usar la apariencia predeterminada de los botones.
  • reset: un botón usado para reiniciar los controles del formulario a sus valores iniciales.
  • button: un botón sin una acción predeterminada asociada.

Cuando este atributo está ausente, el elemento se comporta como si tuviera el valor "text".

Ejemplo

<input type="range" name="piezasrecolectadas">

value

Un valor inicial para el control, que será establecido cuando la página se cargue y cuando el botón de reinicio sea presionado.

El valor provisto por este atributo debe acatar los requerimientos de las cadenas numéricas o estar compuesto por dos cadenas numéricas separadas por una coma (",").

Ejemplo

<form action="../../form-result.php" method="post" target="_blank">
  <p>Piezas perdidas: <input type="range" name="piezasperdidas" value="25"></p>
  <p>
    <input type="submit" value="Enviar datos">
    <input type="reset" value="Restaurar formulario">
  <p>
</form>

Piezas perdidas:

multiple

Un valor booleano que indica si el control debería aceptar uno o dos valores como entrada. Si el valor de este atributo es "multiple" o la cadena vacía (""), o si el atributo está simplemente presente, el control debería tomar dos números.

Este atributo ha sido incorporado al estándar HTML5 y, por falta de implementación por parte de los navegadores, posteriormente removido. Su uso es, consecuentemente, inválido.

Ejemplo

<form action="../../form-result.php" method="post" target="_blank">
  <p>
    Ubicación del anuncio: <input type="range" name="ubicacionanuncio" multiple>
    <input type="submit" value="Enviar datos">
  </p>
</form>

Atributos globales

Para más información acerca de los atributos globales refiérete a esta lista de atributos gloables en HTML5.

Eventos

Eventos globales

Para más información acerca de los eventos globales refiérete a esta lista de eventos globales en HTML5.