输入范围自动对焦

Question

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

我只想通过 mousemove 更改范围滑块的值，如果可以使用 JS/jQuery。

范围内的自动对焦之类的东西，这样我就可以拖动拇指而无需长按..

$('#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">

Answer 1

这个怎么样：

<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

输入范围自动对焦

Input Range autofocus

html

javascript

jquery

input

slider