javascript - 如何使这个 slider 控件双向工作？

Question

我正在尝试制作一个范围 slider ，但它仅在单个方向(向右)工作并拖出父容器(#volume)。我该如何解决这个问题？

我附上了一个演示 fiddle 链接。

标记

<div id="volume">
    <div class="progress">
        <div class="volumeslider"></div>
    </div>
</div>

CSS

#volume{
    width:300px;
    background: #ddd;
    cursor:pointer;
}
.progress{
    height:10px;
    background:#999;
    position:relative;
    width:0;
}
.volumeslider {
    background: #808080;
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 15px;
    right: -10px;
    top: -5px;
}

JS

$('.volumeslider').bind('mousedown', function(e){
    $('.volumeslider').bind('mousemove', function(e){
        $('.progress').width(e.pageX - $('.progress').offset().left + 'px');
        $(this).css('left', e.pageX - ($(this).width()/2) );
    });
    $('.volumeslider').bind('mouseup',function(){
        $('.volumeslider').unbind('mousemove');
    });
});

JS fiddle : http://jsfiddle.net/2mYm7/

Answer 1

您没有考虑为 body 元素提供的填充。 我对代码做了一些修改。

  $('.volumeslider').bind('mousedown', function (e) {
      console.log('binded');
    $('.volumeslider').bind('mouseup', function (e) {
        console.log('unbinded');
       $('.volumeslider').unbind('mousemove');
    });
    $('.volumeslider').bind('mousemove', function (e) {
      console.log('mousemove');
      $('.progress').width(e.pageX -  $('.progress').offset().left + 'px');
      $(this).css('left', e.pageX - 25- $(this).width());
    });

 });

检查这个 jsFiddle http://jsfiddle.net/2mYm7/1/