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 -gradients

Here is the browser support for linear gradients: http://caniuse.com/#feat=css-gradients

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

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