How to realize range slider using jQuery

/*by Jiangong SUN*/

Here is an sample for my project which is realized using aspx and jquery slider library.

$(document).ready(function () {    //centralised slider code    var stepvalues = ["0", "3000", "5000", "8000", "12000", "15000", "20000", "25000", "30000", "40000", "50000"];    var minRange = 0;    var maxRange = 50000;    //var range = '<%#WebContext.Current.User.PropertiesInternaute["+Elementcatalogue_montant"] != null ? WebContext.Current.User.PropertiesInternaute["+Elementcatalogue_montant"] : ""  %>';    if (range != '') {        var valmin = range.split('$')[0].replace(/\s+/g, "");        var valmax = range.split('$')[1].replace(/\s+/g, "");    }    else {        var valmin = 0;        var valmax = 50000;    }    $("#slider-range").slider({        range: true,        min: 0, //minimum value        max: 10, //maximum value        step: 1, //step        values: [valmin, valmax],        start: function (event, ui) {            var valueL = $(this).slider('option', 'values')[0].toString().replace(/\s+/g, "");            var valueR = $(this).slider('option', 'values')[1].toString().replace(/\s+/g, "");            if ($.inArray(valueR, stepvalues) != -1) {                ui.values[1] = $.inArray(valueR, stepvalues);                $(this).slider('option', 'values')[1] = $.inArray(valueR, stepvalues);            }            if ($.inArray(valueL, stepvalues) != -1) {                ui.values[0] = $.inArray(valueL, stepvalues);                $(this).slider('option', 'values')[0] = $.inArray(valueL, stepvalues);            }        },        slide: function (event, ui) {            var minvaleur = stepvalues[ui.values[0]];            var maxvaleur = stepvalues[ui.values[1]];            $("#amount").val(minvaleur + " $ " + maxvaleur);            $("a.ui-slider-handle").empty();            $('a.ui-slider-handle').eq(0).append(minvaleur);            $('a.ui-slider-handle').eq(1).append(maxvaleur);        }    });    if (range != '') {        minRange = range.split('$')[0];        maxRange = range.split('$')[1];    }    var positionL = $.inArray(minRange.toString().replace(/\s+/g, ""), stepvalues) * 10;    var positionR = $.inArray(maxRange.toString().replace(/\s+/g, ""), stepvalues) * 10;    $('a.ui-slider-handle').eq(0).append(minRange);    $('a.ui-slider-handle').eq(0).css('left', positionL + '%');    $('a.ui-slider-handle').eq(1).append(maxRange);    $('a.ui-slider-handle').eq(1).css('left', positionR + '%');    $('a.ui-slider-handle').eq(1).addClass("maxinfo");    $("#amount").val(minRange + " $ " + maxRange);    //get new position for handles    if (range != null && range.length > 0 && range != '') {        var min = $.inArray(minRange.toString().replace(/\s+/g, ""), stepvalues);        var max = $.inArray(maxRange.toString().replace(/\s+/g, ""), stepvalues);        $("#slider-range").slider('option', 'values', [min, max]);    }});

Enjoyr coding!