jQuery Slider - 你可以在栏上有不同的颜色吗?

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

本文介绍了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/

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

本文标题为:jQuery Slider - 你可以在栏上有不同的颜色吗?

基础教程推荐