jQuery UI 带有多个范围背景错误的滑块

Question

我正在尝试创建具有 2 个范围的滑块并向背景添加一些颜色，最大值 100 就可以了（第 9 行）：

$(function () {
    // the code belows assume the colors array is exactly one element bigger than the handlers array.
    var handlers = [20, 40, 60, 80];
    var colors = ["#ff0000", "#00ff00", "#0000ff", "#00ffff", "#00A3A3"];
    updateColors(handlers);

    $("#slider").slider({
        min: 0,
        max: 100,         // change to 95 causes problems
        values: handlers,
        slide: function (evt, ui) {
          for(var i = 0, l = ui.values.length; i < l; i++){
            if(i !== l-1 && ui.values[i] > ui.values[i + 1]){
              return false;
            }
            else if(i === 0 && ui.values[i] < ui.values[i - 1]){
              return false;
            }
          }
         updateColors(ui.values);
        }
    });

    function updateColors(values) {
        var colorstops = colors[0] + ", "; // start left with the first color
            for (var i=0; i< values.length; i++) {
                colorstops += colors[i] + " " + values[i] + "%,";
                colorstops += colors[i+1] + " " + values[i] + "%,";
            }
            // end with the last color to the right
            colorstops += colors[colors.length-1];

            /* Safari 5.1, Chrome 10+ */
            var css = '-webkit-linear-gradient(left,' + colorstops + ')';
            $('#slider').css('background-image', css);
    }
});

从max:100改成max:95后出现问题：http://jsfiddle.net/LLfWd/623/

Answer 1

终于，我做到了...

我们需要忘记附加渐变或新的 div。从您的代码中删除它。
在小部件初始化时，我们需要将新的 class 添加到我们的块中（参见第 9 行）。
通过 css (before/after) 使用新 class.

http://jsfiddle.net/LLfWd/624/$(this).addClass("ui-slider-multiple");

jQuery UI 带有多个范围背景错误的滑块

jQuery UI Slider with multiple range background bug

jquery

jquery-ui

jquery-widgets