Selector de rangos jQuery con diseño para personalizar fácilmente

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