具有多范围背景错误的 jQuery UI 滑块答案

【问题标题】：jQuery UI Slider with multiple range background bug具有多范围背景错误的 jQuery UI 滑块
【发布时间】：2017-05-08 07:06:23
【问题描述】：

我正在尝试创建具有 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/

【问题讨论】：

插入代码，删除聊天文本

标签： jquery jquery-ui jquery-widgets

【解决方案1】：

终于，我做到了……

我们需要忘记附加渐变或新的 div。从您的代码中删除它。
在小部件初始化时，我们需要将新类添加到我们的块中（参见第 9 行）。
在新类中使用带有句柄的 css（之前/之后）做一些魔术。

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

【讨论】：