jQuery UI Slider with multiple range background bug

Question

I'm trying to create slider with 2 ranges and add some color to background, it's OK with max value 100 (line 9):

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

    $("#slider").slider({
        min: 0,
        max: 100,         // change to 95 causes problems
        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;
            }
          }
         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);
    }
});

Problems appear after changing it, from max:100 to max:95: http://jsfiddle.net/LLfWd/623/

Answer 1

Finally, i did it...

1. We need to forget about appending gradients or new div. Remove this from your code.
2. At widget initialized we need to add new class to our block (see line 9).
3. Do some magic via css (before/after) with handle in new class.

http://jsfiddle.net/LLfWd/624/$(this).addClass("ui-slider-multiple");