帶標記的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/