jQuery Slider - 你可以在栏上有不同的颜色吗? [英] jQuery Slider - can you have different colours on the bar?

问题描述

我正在使用 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/

这篇关于jQuery Slider - 你可以在栏上有不同的颜色吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！