div模拟滑块滑动的问题

div模拟滑块滑动和HTML5 range控件的对比 如图:
用div模拟当鼠标在滑条外时,鼠标此时移动滑块不改变位置。而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;
    })
阅读 4.4k
1 个回答
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题