Ion.Range es un plugin jQuery para crear un bonito selector de rangos que a diferencia de otros similares permite personalizar su diseño de manera sencilla y rápida.
El método para personalizar este buen recurso es por medio de “skins”, una estructura básica CSS que podemos modificar a nuestro gusto simplemente cambiando unos pocos valores.
La compatibilidad con los distintos navegadores es excelente, cuenta con total soporte para: Google Chrome, Mozilla Firefox, Opera, Safari, IE(8.0+).
Otro detalle importante es que este recurso viene listo para ser utilizado en dispositivos táctiles.
Ejemplo de selector de rangos:
$("#ID").ionRangeSlider({
min: 10, // min value
max: 100, // max value
from: 30, // overwrite default FROM setting
to: 80, // overwrite default TO setting
type: "single", // slider type
step: 10, // slider step
postfix: " pounds", // postfix text
hasGrid: true, // enable grid
hideText: true, // hide all text data
onChange: function(obj){ // callback, is called on every change
console.log(obj);
},
onFinish: function(obj){ // callback, is called once, after slider finished it's work
console.log(obj);
}
});
Ion.Range se encuentra liberado bajo licencia MIT, permitiendo su libre utilización tanto en proyectos personales como comerciales.
Web: ion.rangeSlider
