一种可能性是将滑块背景设置为 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-线性-梯度,-ms-线性-梯度等...)就像我在这里为 -webkit-线性-梯度 所做的那样。