当我击中拇指不完全位于中心时，使输入范围不跳跃

Question

下面是范围类型的 HTML 输入。我把它做得更大，以便更明显。当我将鼠标放在红色拇指上并移到一边时，如果我没有完全位于拇指中心，它会跳跃，以便鼠标光标位于拇指中心，然后它会正常移动。

是否有可能改变它，以便在第一次移动时没有第一次突然跳跃？

input[type=range] {
  -webkit-appearance: none;
  pointer-events: none;
  background-color: green;
} 
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 1cm;
  height: 1cm;
  background-color: red;
  cursor: pointer;
  pointer-events: auto !important;
}

<input type="range">   

Answer 1

恐怕实现这一点的唯一方法是用 Javascript 覆盖范围行为。

\n\n

我用 jQuery 完成了它，但也可以使用 vanilla JS 或任何其他 JS 框架来完成。

\n\n

请注意，我已经修复了 CSS，使其可以在 Firefox 中工作。\n我还必须使用px而不是cm拇指宽度，以便可以将该值提供给 JS。

\n\n

\r\n

\r\n

function overrideSliderBehavior() {\r\n  var el = $(this);\r\n  var thumbWidth = parseFloat(el.data(\'thumb-width\'));\r\n  if(!thumbWidth) {\r\n    return;\r\n  }\r\n  var dragOrigin = null;\r\n  el.on(\'mousedown\', function(evt) {\r\n    evt.preventDefault();\r\n    dragOrigin =  {\r\n    \tx:event.clientX,\r\n        val:parseFloat(el.val())\r\n    };\r\n  });\r\n  $(document).on(\'mouseup\', function(){\r\n    dragOrigin = null;\r\n  });\r\n  $(document).on(\'mousemove\', function(evt) {\r\n    if(dragOrigin !== null) {\r\n      evt.preventDefault();\r\n      var rect = el[0].getBoundingClientRect();\r\n      var offsetX = (event.clientX - dragOrigin.x);\r\n      var offsetVal = offsetX/(rect.width - thumbWidth);\r\n      var max = el[0].max || 100;\r\n      var min = el[0].min ||\xc2\xa00;\r\n      el.val(dragOrigin.val + offsetVal*(max - min));\r\n    }\r\n  });\r\n}\r\n\r\n$(document).ready(function() {\r\n    $(\'input[type=range]\').each(overrideSliderBehavior);\r\n});

\r\n

input[type=range] {\r\n  -webkit-appearance: none;\r\n  pointer-events: none;\r\n  background-color: green;\r\n  height: 38px;\r\n} \r\ninput[type=range]::-webkit-slider-thumb {\r\n  -webkit-appearance: none;\r\n  width: 38px;\r\n  height: 38px;\r\n  background-color: red;\r\n  cursor: pointer;\r\n  pointer-events: auto !important;\r\n}\r\ninput[type=range]::-moz-range-thumb {\r\n  width: 38px;\r\n  height: 38px;\r\n  background-color: red;\r\n  cursor: pointer;\r\n  pointer-events: auto !important;\r\n  border: none;\r\n  border-radius: 0;\r\n}

\r\n

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"   integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs="   crossorigin="anonymous"></script>\r\n\r\n<input type="range" data-thumb-width="38"> 

\r\n

\r\n

\r\n

\n