Programación y ejemplos de PHP, jQuery, HTML5, WordPress, MySQL, AMP y htaccess


HTML5 range input: Rangos de valores con barras de desplazamiento o sliders

Vamos a repasar el HTML5 range input, es un nuevo elemento de formulario para la entrada de datos que nos ofrece  HTML5.

Este input es muy parecido al HTML5 number input en cuanto al formato de datos, la diferentecia radica en que los valores se especifican mediante sliders o barras de desplazamiento.

Sintaxis del HTML5 range input

Voy a explicaros su sintaxis básica tal y como viene en su web oficial:

Como veréis la sintaxis es muy sencilla, os he puesto los atributos más comunes:

  • max y min para establacer el rango de valores máximo y mínimo.
  • value para especificar un valor por defecto.
  • step para establecer el valor numérico de avance del slider o barra de desplazamiento.

En la imagen de abajo vemos como se representa en los navegadores compatibles con los nuevos input HTML5.

HTML5 range input

Ejemplo de HTML5 range input

Os pongo esta demo de ejemplo de HTML5 range input en la que veremos como se usa e interactua con las barras de desplazamiento o sliders.

Os explico el código anterior probado en Google Chrome:

  1. Formulario donde únicamente tenemos el HTML5 input range y el botón de envio de formulario.
  2. El input contiene los atributos básicos que expliqué en su sintaxis: max, minstep y value.
  3. Por último saco el valor enviado en el formulario con método POST por pantalla.

Obtener el valor de un HTML5 input range con jQuery change()

En la demo anterior no se representa en ningún lado el valor que estamos asignando con el input range. De momento no hay ningún atributo que nos los represente.

Espero que con el paso de los meses mejoren este tema, poque si no, este elemento estaría huérfano y no sabríamos el valor que estamos asignando.

Para salir del paso he realizado esta segunda demo de ejemplo para obtener el valor del HTML5 input range con jQuery change():

Os explico la demo:

  1. Al input range le he asigando un id ‘edad’.
  2. He creado un text input para asignarle el valor del input range.
  3. Con el script jQuery asigno al text input el valor del input range cada vez que se deslice la barra de desplazamiento o slider. Para ello he usado las funciones jQuery change() y jQuery val().

Atributos válidos para HTML5 range input

Voy a listaros los atributos válidos para este input según la W3C.

  1. name: Nombre del input (name=»nombre del input»).
  2. disabled: Atributo que determina si está desactivado el input para la introducción de datos (disable=»disabled»), por defecto activado.
  3. form: Con este atributo se asocia el id del form al que pertenece el input (form=»id del form»).
  4. autocomplete: Con autocomplete activado el input se autorrellenará con contenidos anteriormente enviados por él mismo (autocomplete=»off», autocomplete=»on»)
  5. autofocus: Este atributo hace que el cursor se situe en en input (autofocus=»autofocus»).
  6. list: Asocia mediante id una lista de valores predefinidos (list=»nombre lista»)
  7. min y max: Fijan los valores máximos y mínimos que puede tener el range input (max=»5″ y/o min=»0″).
  8. step: Valor numérico con el cual varías el intervalo del input (step=»2″, sumarías o restarías de 2 en 2 en el slider).
  9. value: Valor por defecto del input.
  10. novalidate: Hace que el input no se valide al enviarse el formulario.

Listado de los nuevos input HTML5

En esta url tenéis el listado completo de los nuevos input de HTML5.

Listado de los nuevos atributos HTML5

En esta otra url tenéis todos los nuevos atributos HTML5 para inputs y formularios.

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.

ACEPTAR
Aviso de cookies