how can I change the background color of slider using jquery or css

Question

Will u please tell me how can i change the background color of the slider using jquery and css when it slides.

I have used the method

.ui-slider-range{background:colorName};

Answer 1

I hope this helps.

There is also a demo of this example.

$(document).ready(function() {
    $('.slide').slider({
        slide: function(event, ui) {
            // from pure red to pure green
            var r, g, b = 0;
            g = Math.round(255 / 100 * ui.value); // 2.55 * (0 - 100) = 0 - 255
            r = 255 - g;
            var color = 'rgb(' + r + ',' + g + ',' + b + ')';
            $(this).css({
                'background': color
            });
        }
    });
});

You can find algorithms for color lines out there somewhere ;-) This one I just made up.

ps I've added another "algorithm" into demo ;-)

Answer 2

This might be useful. It's using JQuery to alter the css. all of my attempts, in my case, to set the CSS on the actual DIV, where the slider resided, failed? I guess the JQuery CSS libraries took precedence? It seems like over-kill. But this worked for me.

    var cs_style = "<style>#your_slider_div .ui-widget-header { background: #7D1515; } </style>";
    $('html > head').append(cs_style);

Running this ABOVE the jQuery function (definition and call) for your slider will set the background colour to a dark red colour. Of course, you can set it to what-ever you like. More than one way to crack the nut eh?