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

问题

Am using the jQuery Slider option.

JSFIDDLE

JS Fiddle Example

Coloured Bar

 $('.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.

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.

Is that possible?

Answer provided using linear gradient is what I need but the client is using IE8.

回答1:

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%)');

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

Live example: http://jsfiddle.net/teawd5dw/

回答2:

The answer provided by @Marcelo is actually far more elegant and exactly what I needed. However, IE8 proved problematic and as that was the browser of choice for the client, I needed to find an alternative.

I've utilised the stop function and then used simple if statements. It's not exactly how I wanted it but it works.

$("#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

来源：https://stackoverflow.com/questions/27948262/jquery-slider-can-you-have-different-colours-on-the-bar

标签

jquery

css

slider