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

Question

在chrome上工作时，我设法做出了自定义的输入范围，但在其他浏览器（如firefox）上却出现了问题

在chrome上是这样的

到目前为止，这是我的代码

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

<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>

和CSS

.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;
}

我尝试阅读文档，但对如何使其工作一无所知。

更新：

通过输入[type = range] ::-moz-range-thumb进行修复