Jquery slider background color overflowing when using multiple sliders

Jquery slider background color overflowing when using multiple sliders

When I move the second slider's right handle to left, the first slider is also affected (see the green overflow at the picture).


The code is as follows:

HTML:

  1. <div class="controls">
        <span class="amount"></span>
        <div class="slider range-slide">
            <div class="slide" value="333,686" id="diameterslider" min="25" max="1000">
                <span id="min">min:25</span>
                <span id="max">max:1000</span>
            </div>                                   
        </div>
    </div>

    <div class="controls">
        <span class="amount"></span>
        <div class="slider range-slide">
            <div class="slide" value="333,686" id="relativefloorslider" min="25" max="1000">
                <span id="min">min:25</span>
                <span id="max">max:1000</span>
            </div>                                   
        </div>
    </div>


















CSS:

  1. .ui-slider {
        position: relative;
        text-align: left;
        background: #F84831; // red
    }
    .slide-back {
        position:absolute;
        height:100%;
    }








Javascript:

  1. $(".range-slide div.slide").each(function() {
        values = $(this).attr('value').split(',');
        firstVal = values[0];
        secondVal = values[1];   
       
        // Update colors
        var doUpdate = function() {
            $("div.slide .slide-back").remove();
            $($("div.slide a").get().reverse()).each(function(i) {
                var bg = '#0f0'; // green
                if(i == 1) {
                    bg = '#0ff'; // light blue
                }
                $("div.slide").append($('<div></div>').addClass('slide-back').width($(this).position().left - 5).css('background', bg));
            });
        };   
       
        $(this).slider({
            values: [firstVal , secondVal],
            min: parseInt($(this).attr('min')),
            max:  parseInt($(this).attr('max')),
            range: true,
            slide: function(event, ui) {
                $(this).parent().siblings('span.amount').html("@Messages("min.limit"): " + ui.values[0] + " - @Messages("max.limit"): " + ui.values[1]);
                doUpdate($(this));
            }
        });
    });   




























Do you know how I can handle this issue? I used following jsfiddle as base point: another jsfiddle

Cheers, Alp