CSS property "accent color" not showing because of "-webkit-appearance: none"

Question

I want to change the accent color of a custom range slider input. To override the default style, I used the property "-webkit-appearance: none". However, if that option is applied, the accent color is not shown. If I choose ""-webkit-appearance: slider-horizontal", I lose my custom CSS and it goes back to the default style. This difference with the -webkit-appearance happens in Chrome.

I also tried using the "accent-color" in a class with "::-webkit-slider-runnable-track" but I had the same results.

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

Is there a way to fix this? Thank you in advance!

Additionally, how could I make it appear the same for other browsers like Firefox?

Answer 1

It's been 10 months but maybe this will help you or someone else, I was having the same problem as you, using the accent color works when you are using the default styles of the browser but when you need to remove the styles to create your own input range then the accent colors rule is no longer avaliable.

You first need to use javascript to create a way to track the progress of the value of the input, in my case I was creating a music player and used an input range as the progress bar of the song, the tracking of the progress is specific to each project and functionality so there's no meaning in me showing how did I track the progress because it's also using a library to track the current time of the song with some states and a useEffect, for now the progress in inside a constant called "progress".

From there you use a dynamic linear-gradient as a style for the input's background to change the input's background color based on the progress like this

<input
          type="range"
          min="0"
          max="1"
          step="any"
          value={progress || 0}
          className="progress-input"
          style={{
            background: `linear-gradient(to right, #253142 ${progress * 100}%, #dd3254 ${progress * 100}%)`
          }}
        />

and then in your CSS you give your normal styles to the input

.progress-input {
  -webkit-appearance: none;
  width: 100%;
  height: 5px;
  border-radius: 5px;
  cursor: pointer;
}


.progress-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  background: #253142;
  height: 17px;
  width: 17px;
  border-radius: 100%;
  cursor: pointer;
}

Hope this helps you, I'm not the best in explaning code but I did what I could hahaha