jQuery Slider - 你可以在栏上有不同的颜色吗?
我正在使用 jQuery Slider 选项.
Am using the jQuery Slider option.
JSFIDDLE
JS 小提琴示例
彩色条
$('.ui-widget-content').css('background','green');
所以，我可以像上面那样给条上色，这很好，但都是一种颜色.
So, I can colour the bar as above, which is fine but it is all one colour.
但是，我想要实现的是条上的不同颜色，所以在这个例子中.
However, what I would like to achieve is different colours on the bar, so in this example.
值介于 0 和 30 之间、橙色介于 30 和 70 之间、绿色介于 70 和 100 之间时，条形将被着色.
The bar would be coloured where values are between 0 and 30, orange between 30 and 70 and green between 70 and 100.
结果将是一个带有红色、橙色和绿色的条，滑块移动到上面.
The result would be a bar with red, orange and green that the slider moves over.
这可能吗?
我需要使用线性渐变提供的答案，但客户端使用的是 IE8.
推荐答案
您可以在背景中使用线性渐变来实现:
You can use a linear gradient in your background to achieve this:
$('.ui-widget-content').css('background','linear-gradient(to right, red 30%, orange 30%, orange 70%, green 70%, green 100%)');
这是浏览器对线性渐变的支持:http://caniuse.com/#feat=css-渐变
Here is the browser support for linear gradients: http://caniuse.com/#feat=css-gradients
现场示例:http://jsfiddle.net/teawd5dw/
相关文章