Change jquery slider background-color on the left side of the first handle

I have a jquery range-slider, but now I want to add an extra function to it.

I want the left side of the handle to be another color than the right side. I made a little mock-up so i开发者_如何学JAVAt's clear what I mean.

I already found a way to get the minimum value:

$(".sleep").slider("option", "min");

and I found the code for getting the value from the first slider

$(".sleep").slider("values", 0)

But now I'm kinda stuck how to continue. Hope someone can help me!

Edit: created a jsfiddle page to make it a little bit easier: http://jsfiddle.net/BxY99/12/

Got it Kim,

http://jsfiddle.net/BxY99/14/

Wondering how I got 8.6? I have not the remotest clue, pure trial and error. I'd recommend using a percentage width of some kind, but I can't seem to figure out a formula that might work.

Here's an explanation,

CSS for the left end of the slider, emulating the jQuery slider,

.customMarker {
    display: block;
    font-size: 0.7em;
    position: absolute;
    z-index: 1;
    background-color:#ff0000;
    top:0;
    left:0;
    height:100%;
}

We append the marker to the slider and handle the slide event to set its width.

var slideVal = 0;
$(".sleep").slider({
          range: true,
          min: 0,
          max: 2879,
          values: [540, 1020],
          step:5,
          animate: true,
          slide: function(event, ui) {
            slideVal = $(".sleep").slider("values", 0) / 8.6;

    $('#values').text(slideVal);
    $('.customMarker').css('width', slideVal + 'px');
}
});

$('.sleep').prepend("<div class='customMarker'></div>");

If you are using http://docs.jquery.com/UI/API/1.8/Slider then I do not think that is possible without changing the actual implementation. That one is made up of a single Div element from left to right