Jquery UI Slider range styling (left, and right as well)

Question

Jquery UI slider gives access to class ui-slider-range to do custom css on the selected range. Is there an easy way to add custom css (in my case background color) to what is left and right of the selected range?

Changing the slider background color changes both left and right, I however want a trio effect essentially of 3 separate background colors for the 3 divided regions created by the range min/max selectors;

Answer 1

You could use jQuery to add a background-image style property to your .ui-slider. You'll have to calculate the position of the sliders as a percentage.

For example, check out the CSS

.ui-slider {
    background-image: -webkit-linear-gradient(left, red 50%, blue 50%);
}

Your jQuery would update the style for that specific slider whenever the user moves the slider. Check out this jsFiddle.

var myMin = 0, myMax = 500;
$("#slider-range").slider({
    range: true,
    min: myMin,
    max: myMax,
    values: [75, 300],
    slide: function (event, ui) {
        // Update amount text
        $("#amount").val("$" + ui.values[0] + " - $" + ui.values[1]);

        // Update left/right color
        var left = 100 * (ui.values[0] - myMin) / (myMax - myMin);
        var right = 100 * (ui.values[1] - myMin) / (myMax - myMin);
        $(this).css('background-image', '-webkit-linear-gradient(left, red ' + left + '%, blue ' + right + '%)');
    }
});

Note, you'll have to find a way to initially color the left/right side. Also, there are a few browser-specific background-image properties, see this answer.