How to realize range slider using jQuery

最新推荐文章于 2013-09-04 05:17:48 发布

garcon1986

最新推荐文章于 2013-09-04 05:17:48 发布

阅读量1.1k

点赞数

分类专栏： ASP.NET jQuery JavaScript 文章标签： function jquery null ui

本文链接：https://blog.csdn.net/garcon1986/article/details/8074860

版权

ASP.NET 同时被 3 个专栏收录

30 篇文章 0 订阅

订阅专栏

JavaScript

13 篇文章 0 订阅

订阅专栏

jQuery

10 篇文章 0 订阅

订阅专栏

/*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!