带有标记的 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/