输入范围自动对焦

如何解决输入范围自动对焦

我有一个简单的范围滑块。如您所知，如果我想更改范围滑块的值，我可以单击范围滑块的任意位置或单击滑块拇指并拖动它。

如果可以使用 JS/jQuery，我只想通过 mousemove 更改范围滑块的值，而无需实际单击和拖动。

类似于自动对焦范围的东西，这样我就可以在不长按的情况下拖动拇指..

$('#myRange').mousedown()

#myRange {
  width: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="range" min="1" max="100" value="50" id="myRange">

解决方法

这个怎么样：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="range" min="1" max="100" value="50" id="myRange">

$('#myRange').mousemove(function(e){
  var positionOnSlider = 100 * (e.pageX - $('#myRange').offset().left)/$('#myRange').innerWidth()
  
  $('#myRange').val(positionOnSlider)
})

Demo CodePen