带有多个手柄和背景颜色的滑块内容

我正在尝试使用Jquery UI滑块，我可以在其中有多个句柄：

$(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  ui.values[i + 1]) { return false; } else if (i === 0 && ui.values[i] < ui.values[i - 1]) { return false; } } } }); }); 

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

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

如果可能的话请提供建议。

Answer 1

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

 $(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-linear-gradient，-ms-linear-gradient等等），就像我在这里为-webkit-linear-gradient所做的那样。

Answer 2

（⌐■_■）你好，我的代码附在下面实现（i）3个JQuery UI Slider句柄，意思是4个范围，（ii）范围值不冲突，（iii）范围着色，（iv）标题工具提示处理和（v）显示范围值。 请注意，我使用的是旧的JQuery版本。 此外，它有一个模式，这意味着它可以重新编码，以优雅地支持> = 4句柄。

          
 
 % Style:  
 % Design:  
 % Correctness:  
 % Others:  
 
 
 
   

错误：如果将句柄拖到最左侧，它们会“卡住”，因此您可能需要一个重置按钮来恢复句柄的位置。