feed twitter facebook LinkedIn facebook

HTML5 » Elemento rango en formularios HTML5

enero 31, 2012 por Víctor Cuervo 10 Comentarios Imprimir Imprimir

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.

Visualizar el Codigo
Visualiza el artículo
Descargar el Codigo
Descargar el código
Error en el Codigo
Error en el código
Foro sobre HTML5
Foro sobre HTML5
tags: , , ,

Artículos relacionados:

10 comentarios »

RSS feed para los comentarios de esta entrada. TrackBack URI

  1. keyvin2012
    marzo 4, 2012 #

    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 :D

  2. Víctor Cuervo
    marzo 5, 2012 #

    @keyvin2012,

    Tienes un ejemplo hecho en http://lineadecodigo.com/linea-de-codigo/controlar-volumen-de-video-html5-con-un-slider/

    ¿Eso te vale?

  3. keyvin2012
    marzo 6, 2012 #

    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

Deja un comentario

XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

*