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.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus venenatis est sit amet nulla imperdiet vestibulum...
Y debajo el slider en HTML5:
Ahora vamos a empezar a crear el código de manejo. Para ello vamos a controlar el evento onchange del slider.
barra.addEventListener("change",function(ev){
...
},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.
var barra = document.getElementById("mislider");
resultado = barra.value;
fuente = 2;
var capa = document.getElementById("micapa");
var tamanio = fuente*resultado+"px";
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.
var barra = document.getElementById("mislider");
var fuente = 2;
resultado = barra.value;
var capa = document.getElementById("micapa");
var tamanio = fuente*resultado+"px";
capa.setAttribute("style","font-size:"+tamanio);
Todo nuestro código quedará de la siguiente forma:
var barra = document.getElementById("mislider");
var fuente = 2;
barra.addEventListener("change",function(ev){
resultado = barra.value;
var capa = document.getElementById("micapa");
var tamanio = fuente*resultado+"px";
capa.setAttribute("style","font-size:"+tamanio);
capa.style.borderRadius = tamanio;
},true);
¿Qué te ha parecido este uso del slider de HTML5? ¿Se te ocurren otros?
