如何修复Firefox中双input range滑块无法点击的问题？

在Firefox中双Range滑块出现单个滑块无法点击的问题，核心原因是SVG元素与Range滑块绝对定位后，SVG层级高于滑块，遮挡了点击区域，同时Firefox对Range伪元素的z-index支持逻辑与其他浏览器存在差异。

修复方案 #

调整元素的堆叠层级，确保Range滑块位于SVG之上：

修改CSS中关于.range-slider svg和.range-slider input[type="range"]的定位样式：

.range-slider svg {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: -1; /* 将SVG置于底层，不遮挡滑块 */
}

.range-slider input[type="range"] {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
}

完整修复后的代码 #

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Price Range</title>
  <link rel="stylesheet" href="style.css">
  <style>
    .range-slider {
      width: 480px;
      /* Match this to the SVG's x2 value */
      margin: auto;
      text-align: center;
      position: relative;
      height: 6em;
    }
    
    .range-slider svg {
      position: absolute;
      left: 0;
      bottom: 0;
      z-index: -1; /* 新增：将SVG置于底层 */
    }
    
    .range-slider input[type="range"] {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      -webkit-appearance: none;
      appearance: none;
    }
    
    input[type="number"] {
      border: 1px solid #ddd;
      text-align: center;
      font-size: 1.6em;
    }
    
    input[type="number"]:invalid,
    input[type="number"]:out-of-range {
      border: 2px solid #ff6347;
    }
    
    input[type="range"]:focus {
      outline: none;
    }
    
    input[type="range"]:focus::-webkit-slider-runnable-track {
      background: #2497e3;
    }
    
    input[type="range"]:focus::-ms-fill-lower {
      background: #2497e3;
    }
    
    input[type="range"]:focus::-ms-fill-upper {
      background: #2497e3;
    }
    
    input[type="range"]::-webkit-slider-runnable-track {
      width: 100%;
      height: 5px;
      cursor: pointer;
      animate: 0.2s;
      background: #2497e3;
      border-radius: 1px;
      box-shadow: none;
      border: 0;
    }
    
    input[type="range"]::-webkit-slider-thumb {
      z-index: 2;
      position: relative;
      box-shadow: 0px 0px 0px #000;
      border: 1px solid #2497e3;
      height: 18px;
      width: 18px;
      border-radius: 25px;
      background: #a1d0ff;
      cursor: pointer;
      -webkit-appearance: none;
      appearance: none;
      margin-top: -7px;
    }
    
    input[type="range"]::-moz-range-track {
      width: 100%;
      height: 5px;
      cursor: pointer;
      animate: 0.2s;
      background: #2497e3;
      border-radius: 1px;
      box-shadow: none;
      border: 0;
    }
    
    input[type="range"]::-moz-range-thumb {
      position: relative;
      box-shadow: 0px 0px 0px #000;
      border: 1px solid #2497e3;
      height: 18px;
      width: 18px;
      border-radius: 25px;
      background: #a1d0ff;
      cursor: pointer;
    }
    
    input[type="range"]::-ms-track {
      width: 100%;
      height: 5px;
      cursor: pointer;
      animate: 0.2s;
      background: transparent;
      border-color: transparent;
      color: transparent;
    }
    
    input[type="range"]::-ms-fill-lower,
    input[type="range"]::-ms-fill-upper {
      background: #2497e3;
      border-radius: 1px;
      box-shadow: none;
      border: 0;
    }
    
    input[type="range"]::-ms-thumb {
      z-index: 2;
      position: relative;
      box-shadow: 0px 0px 0px #000;
      border: 1px solid #2497e3;
      height: 18px;
      width: 18px;
      border-radius: 25px;
      background: #a1d0ff;
      cursor: pointer;
    }
  </style>
</head>

<body>
  <div class="range-slider">
    <span>from <input type="number" value="25000" min="0" max="100000" step="500"> to <input type="number" value="75000" min="0" max="100000" step="500"></span>
    <input value="25000" min="0" max="100000" step="500" type="range">
    <input value="50000" min="0" max="100000" step="500" type="range">
    <svg width="100%" height="24">
        <line x1="4" y1="0" x2="480" y2="0" stroke="#444" stroke-width="12" stroke-dasharray="1 28"></line>
    </svg>
  </div>
  <script>
    (function() {
      const parent = document.querySelector('.range-slider');

      if (!parent) {
        return;
      }

      const rangeS = parent.querySelectorAll('input[type="range"]'),
        numberS = parent.querySelectorAll('input[type="number"]');

      rangeS.forEach((el) => {
        el.oninput = () => {
          let slide1 = parseFloat(rangeS[0].value),
            slide2 = parseFloat(rangeS[1].value);

          if (slide1 > slide2) {
            [slide1, slide2] = [slide2, slide1];
          }

          numberS[0].value = slide1;
          numberS[1].value = slide2;
        }
      });

      numberS.forEach((el) => {
        el.oninput = () => {
          let number1 = parseFloat(numberS[0].value),
            number2 = parseFloat(numberS[1].value);

          if (number1 > number2) {
            let tmp = number1;
            numberS[0].value = number2;
            numberS[1].value = tmp;
          }

          rangeS[0].value = number1;
          rangeS[1].value = number2;
        }
      });
    })();
  </script>
</body>

</html>

说明 #

• 通过给SVG设置z-index: -1，将其置于所有交互元素底层，避免遮挡Range滑块的点击区域。
• 移除了::-moz-range-thumb中无效的z-index设置，因为Firefox中伪元素的z-index无法脱离父元素Range独立生效，确保父元素Range层级足够即可。

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