javascript - 当我击中拇指不完全在中心时，使输入范围不跳跃

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 覆盖范围行为。

我是用 jQuery 做的，但它可以用 vanilla JS 或任何其他 JS 框架来做。

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

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

$(document).ready(function() {
    $('input[type=range]').each(overrideSliderBehavior);
});

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

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"   integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs="   crossorigin="anonymous"></script>

<input type="range" data-thumb-width="38">