Reactjs react中输入类型范围内的轨迹颜色

我在react中有下一个输入类型范围：

    inputElement = <div className={styles.InputElementRange}>                
     <input
        min={props.min}
        max={props.min}
        value={props.value}
        onChange={props.changed}
    ></input>
    <input 
       type="text"
       value={props.value}
       onChange={props.changed}
       style={props.stylesElement}              
     />             
   </div>

inputElement=

我得到了这个：

输入类型范围工作得很好，但我无法更改曲目的样式

默认情况下，如何更改蓝色？我想把蓝色换成橙色

提前感谢。

查看如何设置HTML滑块的样式

我找到了一个解决方案：

inputElement = <div className={styles.InputElementRange}>                
     <input
        min={props.min}
        max={props.min}
        value={props.value}
        onChange={props.changed}
        style={{'background': `linear-gradient(to right, orange ${(parseInt(props.value)-props.min)*100/(props.max-props.min)}%, #ccc 0px`}}
    ></input>
    <input 
       type="text"
       value={props.value}
       onChange={props.changed}
       style={props.stylesElement}              
     />             
   </div>

---

我认为我的答案基于此答案：

您可能需要共享

样式的样式。InputElementRange

否则很难知道您专门尝试更改样式的内容。我看到了此代码并进行了测试，但是这些样式将填充条和未填充条的颜色设置为相同的颜色。看到这个链接可能会对您有所帮助，我没有测试它，但我不知道如何调整js代码以做出反应。我要检查一下怎么做。我提到的答案只是CSS。我要检查一下。谢谢

input[type="range"] {
    -webkit-appearance: none;
    width: 100%;
    height: 10px;
    margin-right: 10px;
    border-radius: 6px;
    outline: 0;
    background: #ccc;
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 18px;
    width: 18px;
    border-radius: 3px;
    background: orange;
    border-radius: 50%;
    border: 0;
    cursor: pointer;
  }

/* All the same stuff for Firefox */
input[type=range]::-moz-range-thumb {
    height: 18px;
    width: 18px;
    border-radius: 3px;
    background: orange;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
  }
  
  /* All the same stuff for IE */
  input[type=range]::-ms-thumb {
    height: 18px;
    width: 18px;
    border-radius: 3px;
    background: orange;
    border-radius: 50%;
    border: 0;
    cursor: pointer;
  }