Range Barの左サイドの色の変更方法

実現したいこと

Range bar のデザインカスタムで
カーソル左サイドのバーの色の変更方法

該当のソースコード

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