Artículos
HTML5

Elemento rango en formularios HTML5

31/Ene/2012

Una de las novedades que tenemos dentro de los formularios HTML5 son los elementos input de tipo rango. Estos elementos son unos sliders que nos permiten seleccionar un valor desplazando un puntero sobre el slider.

Para crear un elemento de tipo rango en formularios HTML5 tenemos que crear un elemento input de tipo range de la siguiente forma:

Sobre este elemento podemos definir varios valores. En primer lugar el valor máximo y mínimo del rango. Esto lo haremos mediante los atributos min y max.

De igual manera podemos definir los valores del incremento, es decir, cada vez que desplazamos el puntero en cuanto se incrementará o decrementará el valor del elemento. Este atributo es step. Así si queremos que se incremente de uno en uno definiremos el elemento rango de la siguiente forma:

Los elementos de tipo rango están disponibles vía Javascript. Es decir, podemos acceder a su modelo DOM y consultar el valor que tiene el rango en cualquier momento. Bastará solo con consultar el valor del atributo value.

Por ejemplo, si queremos calcular el valor que tiene el rango cada vez que se modifique podemos crear un listener sobre el evento onchange de dicho rango con el método addEventListener.

var barra = document.getElementById("mislider");
barra.addEventListener("change",function(ev){	
  var resultado = document.getElementById("valor");
  resultado.innerHTML = ev.currentTarget.value;	
},true);

Vemos que cuando utilizamos el método addEventListener el objeto evento que se le pasa a la función lleva la referencia al elemento que generó el evento en el campo currentTarget.

Solo hay que tener en cuenta una cosa al utilizar el elemento range en formularios HTML5 y esto es el soporte de los navegadores, ya que todavía todos no lo dan.

Vídeos sobre HTML5

Disfruta también de nuestros artículos sobre HTML5 en formato vídeo. Aprovecha y suscribete a nuestro canal.

Test HTML5

¿Te atreves a probar tus habilidades y conocimiento en HTML5 con nuestro test?

Test HTML5
Suscribir
Notificar de
guest
10 Comentarios
Recientes
Anteriores Más votados
Opiniones integradas
Ver todos los comentarios