使用多个滑块时，Jquery滑块背景颜色溢出

Question

当我将第二个滑块的右手柄向左移动时，第一个滑块也会受到影响（请参见图片中的绿色溢出）。

代码如下：

HTML：

<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 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>

CSS：

.ui-slider { 
    position: relative;
    text-align: left;
    background: #F84831; // red
}

.slide-back {
    position:absolute;
    height:100%;
}

使用Javascript：

$(".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));
    }
});
}); 

你知道我怎么处理这个问题吗？我使用以下jsfiddle作为基点：another jsfiddle

干杯， ALP