如何使此滑块控件在两个方向上都能工作？

Question

I'm trying to make a range slider but it's working in single direction(to right) only and dragging out of parent container(#volume). How can I fix this?

I've attached a demo fiddle link.

Markup

<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

You have not taken into consideration the padding you have given to the body element. I have made some changes to the code.

  $('.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());
    });

 });

Check this jsFiddle http://jsfiddle.net/2mYm7/1/

Answer 2

Here's an example of how to make it work always and everywhere. Right now it will stay dragging forever if you leave the element.

It includes border checks and makes sure the body is large enough so it stops dragging wherever on the page.

http://jsfiddle.net/2mYm7/5/

var dragging = null;

function startDrag(){
    console.log('started dragging', this);
    var $this = $(this);
    dragging = $this;
    $(document.body).bind('mouseup', stopDrag);
    $(document.body).bind('mousemove', drag);
}

function stopDrag(){
    console.log('stopped dragging', dragging[0]);
    $(document.body).unbind('mouseup', stopDrag);
    $(document.body).unbind('mousemove', drag);
    dragging = null;
}

function drag(e){
    var slider = dragging;
    var progress = slider.parent();
    var container = progress.parent();
    var maxOffset = container.width();
    progress.width(Math.min(e.pageX - progress.offset().left, maxOffset) + 'px');
}

$('.volumeslider').bind('mousedown', startDrag);