How to change the color of the range bar on the left side of the cursor?

How to change the color of the range bar on the left side of the cursor?

xxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxx

React.js

              <input className="range-input" type="range" name="speed" min="0" max="100" 
              value={brightness_value} onChange={handleSliderChange}></input>

App.css

.range-input {
  -webkit-appearance: none; 
  appearance: none;
  cursor: pointer; 
  background: white;
  height: 14px; 
  width: 100%; 
  border-radius: 10px; 
  outline: 0; 
}

.range-input::-webkit-slider-thumb  {
  -webkit-appearance: none; 
  background: white; 
  width: 24px; 
  height: 24px;
  border-radius: 50%; 
  cursor: pointer; 
  box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.15); 
}