meter tag の色をカスタマイズしたい

実現したいこと

画像にあるようなメーターを作りたいと思っているのですが
Meterタグの色を数値が75以上になった部分だけ赤色に変えたい
（自分のは７５を超えると全て赤色になってしまう）

理想のメーター

自分のメーター

該当のソースコード

React.js

<div className="climate_icon_and_slider_section"> <div className='ic_thermometer_and_meter'> <img className="ic_thermometer_for_detail_page" src= {ic_thermometer_for_detail_page} /> <meter max="95" min="45" high="75" value={temperature_value}></meter> </div> <div className="range-container-climate"> <input className="range-input" type="range" name="speed" min="45" max="95" value={temperature_value} onChange={handleSliderChange}></input> </div> </div>

CSS

.ic_thermometer_and_meter { position: relative;} .ic_thermometer_for_detail_page { height: 300px; margin-right: 100px; z-index: 10; position: absolute; top: -140px; right: -100px;} meter { width: 265px; height: 98px; transform:rotate(-90deg); position: absolute; top: -40px; right: -83px; z-index: 7;} meter::-webkit-meter-bar {background: gray;} /*background color of bar*/meter::-webkit-meter-optimum-value {background: #0D76BE;}meter::-webkit-meter-suboptimum-value{background:red;}