javascript - div模拟滑块滑动的问题

Question

p模拟滑块滑动和HTML5 range控件的对比 如图：
用p模拟当鼠标在滑条外时，鼠标此时移动滑块不改变位置。而input type为range控件不会有这个问题。如图：

怎么修改这段js能实现呢？

var left = $(".progress").offset().left;
    var width = $(".progress").width();
    var flag = false;
    $(".slider").on("mousedown",function(e){
        flag = true;
    })
    $(".slider").on("mousemove",function(e){
        if(flag){
            var moveDis = e.pageX -left;
            moveDis = (moveDis) > width ? width : moveDis ;
            $(this).css("left",Math.abs(moveDis/width*100)+"%")
        }
        
    })
    $(".slider").on("mouseup",function(e){
        flag = false;
    })

Answer 1

不知道你说的是不是这个意思。http://codepen.io/yihuaxiang/pen/xOYWQd