Firefox范围滑块将拇指移动到轨迹上方

input[type="range"] {
  -webkit-appearance: none; /* 移除默认样式 */
  appearance: none;
  width: 100%;
  height: 8px;
  background: #ddd;
  outline: none;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  background: #007bff;
  cursor: pointer;
}

input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: #007bff;
  cursor: pointer;
}

<script src="https://cdn.jsdelivr.net/npm/rangeslider.js@2.3.4/dist/rangeslider.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/rangeslider.js@2.3.4/dist/rangeslider.min.css">

document.addEventListener('DOMContentLoaded', function() {
  var rangeSlider = document.getElementById('myRange');
  rangeSlider.rangeslider();
});

rangeSlider.addEventListener('input', function() {
  console.log('Slider value:', this.value);
});