Jquery slider background color overflowing when using multiple sliders

JavaScript
1

Hi,

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:

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

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

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

Cheers, Alp