jquery - 具有多个 handle 和内容背景颜色的 slider

Question

我正在尝试使用 Jquery UI slider ，其中我可以有多个句柄:

$(function () {
        var handlers = [25, 50, 75];
        $("#slider").slider({
            min: 0,
            max: 100,
            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;
                    }
                }
            }
        });
    });

请注意，一个处理程序不能重叠，我需要在加载时动态设置处理程序，并在更改时保存处理程序位置。

我想要完成的事情是将处理程序之间的用户界面内容着色为不同的颜色。我附上了一张图片。

如果可行，请提供建议。

Answer 1

一种可能是将 slider 背景设置为 CSS 渐变，并在 slider 值更改时更新代码中的渐变停止点:

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

    $("#slider").slider({
        min: 0,
        max: 100,
        values: handlers,
        slide: function (evt, ui) {
            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);
    }
});​

http://jsfiddle.net/LLfWd/60/

此代码适用于 chrome 和 safari。我的猜测是你只需要生成多个渐变字符串(对于 -moz-线性-梯度，-ms-线性-梯度等...)就像我在这里为 -webkit-线性-梯度 所做的那样。