Uso básico del input range en HTML5

Sabemos que poco a poco HTML5 se va a ir expandiendo por toda la internet, y a pesar de que esto esté pasando todavía se tiene que erradicar el uso de navegadores web porquería como IE 6, IE7, IE8 y navegadores ya no tan compatibles hoy en día como Firefox 4 para abajo, o Chrome 5 para abajo(aunque ya es menos probable este último por las actualizaciones silenciosas).

Entonces, para iniciar el tutorial de hoy vamos a ver cómo manejar un nuevo elemento de HTML5 derivado de la etiqueta input, hablamos de la barra de rango que si bien no era algo útil hace algunos años por el mejoramiento de la web se ha hecho una herramienta solicitada.

Introducción

Antes de empezar a usar el elemento tenemos que saber algunas cosas importantes. La primera es que es un elemento que encontramos en la etiqueta <input> lo que podría definirse como elemento de formulario.

Lo segundo es que este elemento de rango no sirve mágicamente sólo porque está definido en el estándar de HTML5, necesita el uso de Javascript para ponerlo a funcionar de verdad, porque de lo contrario sólo podremos mover el indicador.

Y por último, para que funcione debemos usar eventos, algo lógico para algunos, pero no tanto para los que no están acostumbrados a programar, aunque debería entender que estas personas empiezan a desarrollar realmente.

Entonces, sabiendo estos tres principios generales empecemos a hacer un pequeño ejemplo del uso del input range.

Tutorial terminado

HTML

Lo que vamos a hacer es lo siguiente: vamos a configurar in elemento de rango para que redimensione una imagen usando sólo Javascript y estilos CSS, de esa forma se pretende comprender de una forma sencilla el uso del input.

El código HTML es el siguiente:

Lo que tenemos son dos capas y una imagen. La primera imagen es sólo para ver el valor actual del input, puesto que el rango no aparece por defecto, por eso necesitamos esa capa, pero igual se la podrían quitar.

El elemento que sigue es nuestro input, y si se dan cuenta la declaración es igual que cualquier input, a excepción de los limites o el intervalo en que funciona el indicador del rango, que en nuestro caso va de 10 a 100, que sería el porcentaje de crecimiento de nuestra imagen. Lo que deben notar es que le asignamos una función a un evento onchange() para que la función se active cada vez que el valor del rango cambie.

Por último está nuestra imagen. No es necesario explicar mucho en esta parte más que le pusimos un id para usarlo en javascript.

Javascript

Nuestra función hace dos cosas muy sencillas pero básicas para el input de rango. Lo primero es leer el valor y después aplicarlo a una operación. Lo primero lo logramos cuando obtenemos con un getElementById() el valor del indicador del rango. Lo segundo lo conseguimos cuando aplicamos un estilo de tamaño en porcentaje a la imagen usando el valor del rango.

Para mostrar los valores imprimo el valor actual del rango en la capa que definimos arriba, terminando así con nuestro tutorial.

Soporte

Lo que les decía,