Javascript 如何使用React更改滑块拇指颜色

这是我的实际输入范围：

这就是我想要的：

和

范围组件.tsx：

const active = '#64c3ef'
const inactive = '#dbdbdb'

export class RangeComponent extends React.Component<Props> {
  inputRef: any = React.createRef()

  state = { value: 10 }

  handleChange = (min: number, max: number) => (event: any) => {
    const value = event.target.value
    const progress = (value / max) * 100 + '%'
    this.setState({ value: value })
    const newBackgroundStyle = `linear-gradient(90deg, ${active} 0% ${progress}%, ${inactive} ${progress}% 100%)`
    this.inputRef.current.style.background = newBackgroundStyle
  }

  render() {
    const minValue = 10 
    const maxValue = 300
    const progress = (this.state.value / maxValue) * 100 + '%'

    const styleInput = {
      background: `linear-gradient(90deg, ${active} 0% ${progress}%, ${inactive} ${progress}% 100%)`,
    }

    return (
      <div>
        <input
          ref={this.inputRef}
          id="sliderId"
          className="inputR"
          name="sliderName"
          type="range"
          min={minValue}
          max={maxValue}
          value={this.state.value}
          onChange={this.handleChange(minValue, maxValue)}
          style={styleInput}
        />
        <div className="label">
          {this.state.value}
        </div>
      </div>
    )
  }
}

.inputR::-webkit-slider-thumb {
    background: rgba(255, 208, 255, 0.75);
}

如果可能，我不想在style.css中控制拇指颜色，而是在RangeComponent.tsx中控制拇指颜色

我不明白为什么类

inputR

对输入样式没有影响。

---

如何使用CSS从javascript对象（

styleInput

）更改样式

首先回答最后一个问题：“为什么类inputR对输入样式没有影响。”

第一部分是为了设置滑块/拇指的样式，需要设置“外观：无”。请记住添加-webkit外观以支持跨浏览器。这将有效地使滑块/拇指不可见，以便进行样式转换。对inputR和inputR执行此操作：：-webkit滑块拇指。（）

第二部分是，虽然您可以执行

.inputR{-webkit外观：none}

在CSS或

常量styleInput={
WebKit外观：“无”
}

在JSX中， 您不能在JSX中执行伪类，例如，

.inputR:：-webkit slider thumb{}

。你需要这样做才能塑造拇指

我的建议是，在CSS中为滑块/拇指设置基本样式，然后通过内联样式或作为样式对象来执行动态部分。（）

接下来你要看的是你的线性梯度。您正在使用变量progress并添加“%”符号。

常量styleInput={
背景：

线性梯度（90度，${active}0%${progress}%，${inactive}${progress}%100%）

，
}

但是在代码中，您已经将“%”添加到了进度中。

const progress=（值/最大值）*100+'%'

因此字符串文字解析为100%%，并且渐变不会渲染。我从样式对象（）中删除了“%”

---

我希望这会有所帮助，如果有任何不清楚的地方，请告诉我。

您可以上传到github或codepen，我们可以查看一下吗？还请包括“slider”类的css。@Francois肯定！我添加了一个代码笔链接：谢谢，我来看看。我现在在手机上。