FireFox浏览器中Price Slider输入控件重叠问题求助

我的价格双滑块控件在Chrome、Safari和Edge中运行正常，但在FireFox中，即便做了针对性调整，仍出现其中一个滑块被另一个遮挡的情况，导致控件无法正常使用。我试过调整z-index等多种方案都没用，了解到FireFox对重叠输入控件的处理逻辑不同，求可行解决办法。

现有代码 #

HTML

<div class="range-slider" id="range-slider">
  <span class="rangeValues" id="range-values"></span>
  <input value="0" min="0" max="100" step="1" type="range" class="range-input">
  <input value="100" min="0" max="100" step="1" type="range" class="range-input">
</div>

CSS

.range-slider {
  width: 150px;
  text-align: center;
  position: relative;
  padding-bottom: 20px;
  background-color: transparent;
}

.range-input {
  border-radius: 100vh;
}

.range-slider .rangeValues {
  display: block;
  background-color: transparent;
  color: var(--text-color);
  border-radius: 10px;
  padding: 20px;
  padding-top: 5px;
  font-size: 18px;
  font-weight: 500;
}

input[type="range"] {
  -webkit-appearance: none;
  -moz-appearance: none; /* Firefox compatibility */
  appearance: none; /* General compatibility */
  border: none;
  width: 100%; /* Ensure the range fills the slider */
  position: absolute;
  left: 0;
  background-color: transparent;
}

input[type="range"]::-webkit-slider-runnable-track {
  width: 100%;
  height: 5px;
  background: var(--text-color);
  border: none;
  border-radius: 100vh;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: none;
  height: 18px;
  width: 18px;
  border-radius: 100vh;
  background: var(--hover-color);
  margin-top: -6.5px;
  cursor: pointer;
  position: relative;
  z-index: 1;
}

/* Firefox track styling */
input[type="range"]::-moz-range-track {
  height: 5px; /* Match WebKit track height */
  background: var(--text-color);
  border: none;
  border-radius: 100vh;
}

/* Firefox thumb styling */
input[type="range"]::-moz-range-thumb {
  border: none;
  height: 18px;
  width: 18px;
  border-radius: 100vh;
  background: var(--hover-color);
  cursor: pointer;
  position: relative;
  z-index: 1;
}

input[type="range"]:focus {
  outline: none;
}

input[type="range"]:focus::-webkit-slider-runnable-track,
input[type="range"]:focus::-moz-range-track {
  background: #ccc;
}

解决方案 #

Firefox中，绝对定位的range控件会优先让DOM顺序靠后的控件捕获交互，且仅给滑块伪元素设置z-index无效——因为Firefox的range滑块伪元素层级受父级input控件直接控制。以下是两种可行方案：

方案一：给父级input设置差异化z-index

修改CSS，给两个range控件分别设置不同的z-index，确保两个滑块都能被点击到：

/* 给第一个range控件设置更高层级，确保其滑块不被遮挡 */
.range-input:first-of-type {
  z-index: 2;
}
/* 第二个控件层级稍低，不影响交互 */
.range-input:last-of-type {
  z-index: 1;
}

如果需要双向无遮挡拖动，可以配合JS监听滑块的mousedown/touchstart事件，动态将当前拖动的控件z-index设为最高：

const sliders = document.querySelectorAll('.range-input');
sliders.forEach(slider => {
  slider.addEventListener('mousedown', () => {
    sliders.forEach(s => s.style.zIndex = '1');
    slider.style.zIndex = '3';
  });
  slider.addEventListener('touchstart', () => {
    sliders.forEach(s => s.style.zIndex = '1');
    slider.style.zIndex = '3';
  });
});

方案二：改用自定义双滑块（更兼容）

如果要彻底规避浏览器差异，可以放弃原生双range控件，用单个range配合两个自定义滑块元素实现，这种方式在所有浏览器中表现一致。不过方案一已能解决Firefox的遮挡问题，无需大幅改动现有代码。

内容的提问来源于stack exchange，提问作者AinuRakk