javascript - 当我的拇指未完全对准中心时，使输入范围不跳跃

以下是类型范围的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">   

最佳答案

恐怕实现此目的的唯一方法是使用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"> 

关于javascript - 当我的拇指未完全对准中心时，使输入范围不跳跃，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/58912344/