Question

这是我的实际输入范围：

这就是我想要的：

RangeComponent.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>
    )
  }
}

style.css ：

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

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

我不明白为什么类inputR对输入样式没有影响。如何使用JavaScript对象（styleInput）中的CSS更改样式？

Answer 1

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

第一部分是，要设置滑块/拇指的样式，您需要设置“外观：无”。记住要添加-webkit-appearance以支持跨浏览器。这将有效地使滑块/拇指不可见，以供您样式化。对inputR和inputR ::-webkit-slider-thumb都执行此操作。（See codepen solution）

第二部分是，尽管您可以做.inputR {-webkit-appearance: none}

在CSS或 const styleInput = { WebkitAppearance: 'none' }

在JSX中，您不能在JSX中执行伪类，例如。 .inputR::-webkit-slider-thumb {}。您需要做的才能为拇指造型。

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

接下来要看的是线性渐变。您正在使用变量 progress 并添加一个“％”符号。const styleInput = { background:线性梯度（90度，$ {活动} 0％$ {进展}％，$ {无效} $ {进度}％100％）, }

但是在您的代码中，您已经将“％”添加到进度中。 const progress = (value / max) * 100 + '%' 因此，字符串文字解析为100 %%，并且不会呈现渐变。我从样式对象（See codepen solution）中删除了“％”

希望对您有所帮助。

如何使用React更改滑块缩略图的颜色

1 个答案: