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

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做了这件事，但它可以用香草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">