Make input range not jump when I hit thumb not exactly in center

Question

Below is HTML input of type range. I made it bigger so that it is more noticable. When I mouse down on red thumb and move to side, if I am not perfectly in the center of thumb it will jump so that mouse cursors is in the center of thumb and then it moves normally.

Is it possible to change it so that there is no first sudden jump on first move?

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

I'm afraid the only way the achieve this, is to override the range behavior with Javascript.

I did it with jQuery, but it could be done with vanilla JS or any other JS framework.

Please note I have fixed the CSS to make it works in Firefox. I also had to use px instead of cm for the thumb width, so that this value can be provided to 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">