Input range HTML5: Usando un slider para seleccionar valores

Este tipo de input muestra una barra de desplazamiento o slider que permite asignar un número. Como el input type number permite los atributos min, max y step. La diferencia entre un input number y un input range es que el range se suele utilizar para cuando no es importante obtener un valor exacto. Como otros elementos HTML 5, cada navegador tiene un diseño predeterminado diferente.

input range html5

Input range en firefox

Como podrás observar no se muestra ningún valor. Esto se debe a que a la hora de usar un input range no es importante obtener un valor exacto como dije anteriormente.

Mostrar el valor con jQuery

En el ejemplo anterior has visto que el slider no muestra el valor seleccionado. Sin embargo, hay una solución sencilla con jQuery.

Para comenzar añadiremos un <label> donde se mostrará el valor del range.

Dentro del <head> introducimos el siguiente código. Llamará a una biblioteca jQuery que es fundamental y a mayores estará el código que se encargará de mostrar el valor del input.

input range html5 valor

Visualización del valor del range

Atributos más usados

Como en otros post sobre etiquetas HTML5 os hablaré de los atributos que podeís utilizar con este elemento:

  • disabled: Permite desactivar el input.
  • form: Permite asociar el form al input introduciendo el id del form.(form = «valoracion»).
  • step: Establece el intervalo de suma o resta en el range.(step=»2″).
  • min y max: Estos atributos establecen el valor mínimo y máximo del range.
  • required: Establece que el input debe ser rellenado. Determina si el input tiene que ser rellenado obligatoriamente (required=»required»).

Y aquí termina el post de hoy, espero que os haya gustado. A seguir picando 🙂