jQuery слайдер с маркером для обозначения разделения

Question

Я пытаюсь построить слайдер в jquery, как показано на рисунке ниже. Когда пользователь перемещает ползунок, значения на маркере обновляются, чтобы указать положение ползунка в процентах. Слайдер теперь находится на отметке 20% / 80%. Область 20% имеет более темный цвет, который увеличивается при перемещении пользователем ползунка вправо и уменьшается при перемещении пользователя влево.

Вот что мне удалось до сих пор. http://dl.dropbox.com/u/1805626/splitter.html

Ценю любую помощь.

Answer 1

Добавьте эту привязку:

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

И добавьте эту CSS:

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

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