如何增加 Mozilla 中的滑块捕获区域（输入类型范围）？

Question

我希望捕获在滑块之外开始。我可以在 Chrome 中执行此操作，但在 Mozilla 中则不起作用。

我在 Chrome 中的做法：

 input[type=range]::-webkit-slider-thumb {
      position: relative;
      -webkit-appearance: none !important;
      height: 14px;
      width: 14px;
      margin-top: 50px; // here I increase
      display: flex;
      justify-content: center;
      align-items: center;
      background: red;
      border-radius: 50%;
      top: -25px;  // here I centered slider
      z-index: 2;
    }

Answer 1

Firefox 替代方案是

::moz-range-thumb

，如 文档中所述：

::-moz-range-thumb,
::-webkit-slider-thumb {
  background-color: red;
  border-radius: 0;
}

input {
  border: 1px solid green;
}

<input type="range"/>