feed twitter facebook LinkedIn facebook

HTML5 » Modificando propiedades CSS con un Slider

febrero 23, 2012 por Víctor Cuervo 1 Comentario Imprimir Imprimir

Una de las aplicaciones que podemos tener con un Slider es la de modificar los valores de las propiedades CSS. Así los incrementaremos o decrementaremos, según vayamos moviendo el slider, aplicarán a ciertos valores de las hojas de estilo.

En nuestro caso lo que vamos a hacer es modificar el tamaño del texto (font-size) y el redonde de las esquinas (border-radiux).

Lo primero será crear la página web, la cual contendrá una capa con un texto dentro.

  1. <div id="micapa">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus venenatis est sit amet nulla imperdiet vestibulum...</div>

Y debajo el slider en HTML5:

  1. <label for="mislider">Redondea los bordes:</label>
  2. <input id="mislider" type="range" min=0 max=20 value="6">

Ahora vamos a empezar a crear el código de manejo. Para ello vamos a controlar el evento onchange del slider.

  1. barra.addEventListener("change",function(ev){
  2. ...
  3. },true);

El código de este manejador será sencillo ya que lo que hará será modificar una propiedad CSS. Bueno, en realidad, dos. Así que vamos a ver dos formas de modificar las propiedades CSS.

La primera forma será modificando el atributo de un objeto. Es decir, el borde de un estilo está representado por el campo .borderRadius. Así que solo tendremos que asignarle un valor.

  1. var barra = document.getElementById("mislider");
  2. resultado = barra.value;
  3. fuente = 2;
  4. var capa = document.getElementById("micapa");
  5. var tamanio = fuente*resultado+"px";
  6. capa.style.borderRadius = tamanio;

Si miramos el código vemos que lo primero que hacemos es coger el valor de la barra mediante el atributo value. Este valor lo vamos a multiplicar por una base y se lo aplicamos al estilo.

La segunda forma es mediante el método .setAttribute(). En este caso lo que hacemos es pasarle el nombre del atributo a modificar "style" y la propiedad CSS que queremos modificar.

  1. var barra = document.getElementById("mislider");
  2. var fuente = 2;
  3. resultado = barra.value;
  4. var capa = document.getElementById("micapa");
  5. var tamanio = fuente*resultado+"px";
  6. capa.setAttribute("style","font-size:"+tamanio);

Todo nuestro código quedará de la siguiente forma:

  1. var barra = document.getElementById("mislider");
  2. var fuente = 2;
  3. barra.addEventListener("change",function(ev){
  4. resultado = barra.value;
  5. var capa = document.getElementById("micapa");
  6. var tamanio = fuente*resultado+"px";
  7. capa.setAttribute("style","font-size:"+tamanio);
  8. capa.style.borderRadius = tamanio;
  9. },true);

¿Qué te ha parecido este uso del slider de HTML5? ¿Se te ocurren otros?

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:

1 comentario »

RSS feed para los comentarios de esta entrada. TrackBack URI

Deja un comentario

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

*