jQuery Slider - 栏上可以有不同的颜色吗？

Question

我正在使用 jQuery Slider 选项。

JSFIDDLE

JS Fiddle Example

彩色条

 $('.ui-widget-content').css('background','green');

所以，我可以像上面那样为条形图着色，这很好，但都是一种颜色。

但是，我想要实现的是栏上有不同的颜色，所以在这个例子中。

当值在 0 到 30 之间时，条形将被着色，在 30 到 70 之间为橙色，在 70 到 100 之间为绿色。

结果将是一个带有红色、橙色和绿色的条， slider 将移过该条。

这可能吗？

使用线性渐变提供的答案是我所需要的，但客户端正在使用 IE8。

Answer 1

您可以在背景中使用线性渐变来实现此目的:

$('.ui-widget-content').css('background','linear-gradient(to right, red 30%, orange 30%, orange 70%, green 70%, green 100%)');

这是浏览器对线性渐变的支持:http://caniuse.com/#feat=css-gradients

实例:http://jsfiddle.net/teawd5dw/