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:
<input type="range">
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.
<input max="10" min="0" type="range">
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:
<input id="mislider" max="10" min="0" step="1" type="range" value="3"></input>
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.
