Свойство CSS «цвет акцента» не отображается из-за «-webkit-appearance: none»

Question

Я хочу изменить цвет акцента для ввода ползунка пользовательского диапазона. Чтобы переопределить стиль по умолчанию, я использовал свойство «-webkit-appearance: none». Однако, если этот параметр применяется, цвет акцента не отображается. Если я выберу "-webkit-appearance: slider-horizontal", я потеряю свой пользовательский CSS и вернусь к стилю по умолчанию. Эта разница с -webkit-appearance происходит в Chrome.

Я также пытался использовать «accent-color» в классе с «::-webkit-slider-runnable-track», но у меня были те же результаты.

HTML:

      <input type="range" value="1000" min="1000" max="10000" class="slider">

CSS:

      .slider {
   -webkit-appearance: none;
   accent-color: #F76900 !important;
   background: #c7c1c1;
   border: none;
   border-radius: 10px;
   height: 5px;
   opacity: 0.7;
   outline: none;
   width: 100%;
}

.slider::-webkit-slider-runnable-track {
   accent-color: #F76900;
   border: none;
   outline: none;
}

.slider::-webkit-slider-thumb {
   -webkit-appearance: none;
   appearance: none;
   width: 20px;
   height: 20px;
   background: #F76900;
   cursor: pointer;
}

.slider::-moz-range-thumb {
   width: 20px;
   height: 20px;
   background: #F76900;
   cursor: pointer;
}

Есть ли способ исправить это? Заранее спасибо!

Кроме того, как я могу сделать так, чтобы он отображался одинаково для других браузеров, таких как Firefox?