Slider with Multiple Handle and Background Color for content

jquery, jquery-ui, jquery-ui-slider

Solution

One possibility would be to set the slider background to a CSS gradient and to update the gradient stops in code when the slider values change:

$(function () {
    // the code belows assume the colors array is exactly one element bigger 
    // than the handlers array.
    var handlers = [25, 50, 75];
    var colors = ["#ff0000", "#00ff00", "#0000ff", "#00ffff"];
    updateColors(handlers);

    $("#slider").slider({
        min: 0,
        max: 100,
        values: handlers,
        slide: function (evt, ui) {
            updateColors(ui.values);
        }
    });

    function updateColors(values) {
        var colorstops = colors[0] + ", "; // start left with the first color
            for (var i=0; i< values.length; i++) {
                colorstops += colors[i] + " " + values[i] + "%,";
                colorstops += colors[i+1] + " " + values[i] + "%,";
            }
            // end with the last color to the right
            colorstops += colors[colors.length-1];

            /* Safari 5.1, Chrome 10+ */
            var css = '-webkit-linear-gradient(left,' + colorstops + ')';
            $('#slider').css('background-image', css);
    }
});​

http://jsfiddle.net/LLfWd/60/

This code works for chrome and safari. My guess is you just have to generate multiple gradient strings (for -moz-linear-gradient, -ms-linear-gradient, etc...) the way I did it for -webkit-linear-gradient here.

Problem

I am trying to work with Jquery UI slider where I can have multiple handles: ``` $(function () { var handlers = [25, 50, 75]; $("#slider").slider({ min: 0, max: 100, values: handlers, slide: function (evt, ui) { for (var i = 0, l = ui.values.length; i < l; i++) { if (i !== l - 1 && ui.values[i] > ui.values[i + 1]) { return false; } else if (i === 0 && ui.values[i] < ui.values[i - 1]) { return false; } } } }); }); ``` Please note that one handler can't overlap and I will need to set the handler dynamically on load, and save the handler positions on change. The thing that i am trying to accomplish is to color the ui-content betweent the handler to different colors. I have attached the an Image. Please advice if this is possible.

Original source