jQuery UI slider gives you it's values, as you can see in the demo:
$( "#slider-range" ).slider({
slide: function( event, ui ) {
/* here, you can play with it */
}
});
I'd set background color of the slider to green, background color of the middle part to yellow and add a div
positioned to the right of the slider with dynamically adjusted width, so that it stratches from right to left
$( "#slider-range" ).slider({
slide: function( event, ui ) {
$('#YourDiv').css('width', ui.values[1]); /* obviously, you have to multiply the value of the slider by something to fit your design */
}
});
In the jQuery UI demo, the div would have styles like this:
#YourDiv {
float: right;
height: 100%;
background: red;
width: 50px; /* this would be dynamic */
border-radius: 0 4px 4px 0;
}
I made a little Fiddle DEMO