jQuery 滑块 - 滑块上可以有不同的颜色吗？

Question

我正在使用 jQuery 滑块选项。

JSFIDDLE

彩条

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

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

然而，我想要实现的是条上的不同颜色，所以在这个例子中。

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

结果将是滑块移过的带有红色、橙色和绿色的条。

这可能吗？

我需要的是使用线性渐变提供的答案，但客户端使用的是 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/

Answer 2

@Marcelo 提供的答案实际上更加优雅，正是我所需要的。然而，IE8 证明是有问题的，因为这是客户选择的浏览器，我需要找到一个替代品。

我使用了 stop 函数，然后使用了简单的 if 语句。这不是我想要的，但它确实有效。

$("#slider").slider(
{
            value:50,
            min: 0,
            max: 100,
            step: 10,
            slide: function( event, ui ) {
                $( "#slider-value" ).html( ui.value );
            },
            stop: function( event, ui ) {
                var num = ui.value;
                if(num <= 30){
                $('.ui-widget-content').css('background','red');
                }
                if(num > 30 || num < 70){
                $('.ui-widget-content').css('background','orange');
                }
                if(num >= 70){
                $('.ui-widget-content').css('background','green');
                }
            }
}
);

$( "#slider-value" ).html(  $('#slider').slider('value') );

JSFIDDLE

JS Fiddle Example

jQuery 滑块 - 滑块上可以有不同的颜色吗？

jQuery Slider - can you have different colours on the bar?

css

jquery

slider