Html 如何使自定义输入范围跨浏览器兼容？

在使用chrome浏览器时，我成功地定制了自己的输入范围，但在其他浏览器（如firefox）上出现了问题

在chrome上是这样的

这是到目前为止我的代码

<script>
    function toggleSteps(element) {
    var minutes = parseInt(element.value);
    if (minutes > 10) {
        element.step = 10;
    } else {
        element.step = 1;
        }
    }

我试着阅读文档，但无法完全掌握如何使其发挥作用

更新：

使用输入[type=range]：-moz range thumb修复它

<input id="multiplier" class="range-multiplier" type="range" value="1" min="0" max="6" oninput="toggleSteps(this);" list="mapsettings">
    <datalist id="mapsettings">
        <option>2x</option>
        <option>4x</option>
        <option>8x</option>
        <option>12x</option>
        <option>16x</option>
        <option>20x</option>
        <option>40x</option>
    </datalist>

.range-multiplier {
    width: 100% !important;
    height: 7px;
    background-color: #e5bb00 !important;
    margin: 0 !important;
}
input[type="range"]::-moz-range-track {
  padding: 0 10px;
  background: repeating-linear-gradient(to right, 
    #ccc, 
    #ccc 10%, 
    #000 10%, 
    #000 11%, 
    #ccc 11%, 
    #ccc 20%);
}
input[type=range] {
  -webkit-appearance: none;
}

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

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: none;
  height: 100px;
  width: 100px;
  background-color: transparent;
  background-image: url("images/car-icon.svg");
  background-position: center center;
  background-repeat: no-repeat;
}