Как я могу сделать настраиваемый диапазон ввода совместимым с браузером?

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

Я пытался читать документацию, но не мог понять, как заставить это работать.

ОБНОВЛЕНИЕ:

Удалось исправить это с помощью input [type= диапазон] :: - Мос-диапазона большой палец