Question

I’m trying to build a slider in jquery as shown in the image below. As a user slides the slider, the values on the marker are updated to indicate the position of the slider in percentage. The slider is now at the 20%/80% mark. The 20% area has a darker color that increases as the user slides the slider to the right and decreases as the user slides to the left.

Here is what I’ve managed so far.
http://dl.dropbox.com/u/1805626/splitter.html

Appreciate any help.

Answer 1

Add this bind:

$('#splitter').bind('drag',function(){
    $('#split-amount').css('width', $(this).position().left +Math.floor($(this).width() / 2) + 'px');
});

And add this CSS:

#split-amount {background-color: #333; height:80px; width:0;}

DEMO: http://jsfiddle.net/AlienWebguy/7mWw7/