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. Bitacoras.com
    febrero 1, 2012 #

    Información Bitacoras.com…

    Valora en Bitacoras.com: 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…..

  2. DataList en HTML5 | Diseño web económico
    febrero 1, 2012 #

    [...] Elemento rango en formularios HTML5 [...]

  3. Linea de Codigo » Controlar volumen de vídeo HTML5 con un Slider
    febrero 3, 2012 #

    [...] En este ejemplo vamos a combinar varias cosas que hemos aprendido sobre el HTML5. Por un lado el manejo de los sliders para poder establecer un rango de valores mediante una barra de desplazamie…. Por otro el manejo de un vídeo en HTML5. Además aprenderemos una cosa nueva, que será el [...]

  4. Controlar volumen de vídeo HTML5 con un Slider | Diseño web económico
    febrero 4, 2012 #

    [...] este ejemplo vamos a combinar varias cosas que hemos aprendido sobre el HTML5. Por un lado el manejo de los sliders para poder establecer un rango de valores mediante una barra de desplazamie…. Por otro el manejo de un vídeo en HTML5. Además aprenderemos una cosa nueva, que será el [...]

  5. Linea de Codigo » Crear un slider con jQuery
    febrero 19, 2012 #

    [...] 19, 2012 por Víctor Cuervo . 4 visitas Sin Comentarios  Imprimir Ahora que hemos publicado un artículo sobre cómo montar un slider en HTML5 muchas de las preguntas que nos están llegando son relativas al no soporte del slider HTML5 en [...]

  6. Crear un slider con jQuery | Diseño web económico
    febrero 19, 2012 #

    [...] que hemos publicado un artículo sobre cómo montar un slider en HTML5 muchas de las preguntas que nos están llegando son relativas al no soporte del slider HTML5 en [...]

  7. Linea de Codigo » Modificando propiedades CSS con un Slider
    febrero 23, 2012 #

    [...] elit. Phasellus venenatis est sit amet nulla imperdiet vestibulum…</div>  Y debajo el slider en HTML5:<label for="mislider">Redondea los bordes:</label> <input [...]

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

  9. 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?

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

*