Elemento rango en formularios HTML5

31/ene/2012 HTML5 , , , 10 Comentarios
Logo HTML5

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:

  1. <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.

  1. <input type="range" min="0" max="10"/>

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:

  1. <input type="range" min="0" max="10" value="3" step="1" id="mislider">

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.

  1. var barra = document.getElementById("mislider");
  2. barra.addEventListener("change",function(ev){
  3. var resultado = document.getElementById("valor");
  4. resultado.innerHTML = ev.currentTarget.value;
  5. },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.

Difunde el Conocimiento

Si te ha gustado el artículo o te ha sido de utilidad, no dejes de compartirlo con tus amigos en las redes sociales... Te estaremos muy agradecidos. :-D

10 comentarios en “Elemento rango en formularios HTML5”

Víctor Cuervo

keyvin2012

en realidad queria que fuera con div algo como

#barra_volume {
position: relative;
width: 100px;
height: 20px;
border: 1px solid #000;
}
#progreso_volume {
position: absolute;
height: 20px;
border: 1px solid #000;
}

claro que el id progreso_volume hiciera width min max segun la subida o bajada de volume

espero me entienda xd tengo la idea pero no se ejecutarla en el javascript

Víctor Cuervo

Víctor Cuervo

Víctor Cuervo

keyvin2012

amigo estoy tratando e crear el volumen por medio de algunos div

algo parecido una barra que haga la opcion de clickear para subir y bajar el volumen

pero no me funca ojala pudieras postear una opcion simple te loa agradeceria en el alma 😀

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*


*