Question

使用jQuery Slider选项。

的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 Slider - 你可以在吧台上有不同的颜色吗？

2 个答案: