RangeSlider.js es una nueva alternativa a la hora de mostrar un selector de rangos, su principal característica es que esta elaborado utilizando HTML5 para todo lo que respecta a su interface gráfica y para lo que se refiere a lo funcional JavaScript utilizando el framework jQuery.
Este componente recalcula su tamaño utilizando la función onresize, esto permite que se adapte a cualquier navegador, ya sea de escritorio o móvil.
Es muy liviano, la biblioteca JavaScript tiene un peso de 10kb en su versión expandida y sin comprimir y su hoja de estilo de 2kb en iguales condiciones, este peso se reduce considerablemente al simplificar los archivos y comprimirlos mediante gzip.
Otro detalle importante es que responde perfectamente en dispositivos táctiles, aspecto que lo convierte en un excelente candidato para funcionar en teléfonos móviles o tablets.
Utilizar este proyecto no requiere más de una linea de código JavaScript:
$('input[type="range"]').val(10).change();
En el ejemplo el numero 10 es el valor con el cual se inicializa el selector de rangos. Luego podemos emplear los atributos min y max para definir las cotas de selección y step para configurar los saltos.
Este recurso es simple pero no por eso menos eficiente, tiene algunas opciones adicionales para adaptar a nuestros trabajos que se documentan perfectamente en el sitio del proyecto, ademas de varios ejemplos que recomiendo revisar.
RangeSlider.js es un proyecto de caracter libre, tanto en su uso como en su distribución.
