输入范围自动对焦答案

【问题标题】：Input Range autofocus输入范围自动对焦
【发布时间】：2021-02-23 15:11:47
【问题描述】：

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

如果可以使用 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">

【问题讨论】：

我不相信原生元素可以做到这一点。您可以研究构建自己的。
你能帮我吗？
有许多不同的方法，Stack Overflow 并不是一个教程网站。我建议谷歌搜索“如何在 HTML、CSS 和 JavaScript 中创建自定义滑块”。
我想你失去了我。我知道如何创建自定义滑块，或者您的意思是没有输入标签的范围滑块
是的，没错。

标签： javascript html jquery input slider

【解决方案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

【讨论】：