Range Slider React悬停，按下并聚焦

如何解决Range Slider React悬停，按下并聚焦

我有一个用React（Babel）和CSS制成的范围滑块。我试图弄清楚如何添加悬停，活动和聚焦效果（更改拇指和滑块左侧的颜色）。我尝试将:hover直接添加到input[type='range']::-webkit-slider-thumb中，但这不起作用。我认为我的主要问题源于以下事实：滑块的左侧使用box-shadow进行样式设置，但是我在文档或Google搜索中没有找到其他方法来处理此问题。任何帮助或建议，表示赞赏！

HTML：

<div id="root"></div>

CSS：

input[type='range'] {
  -webkit-appearance: none;
  background-color: #ddd;
  height: 10px;
  overflow: hidden;
  width: 300px;
  border-radius: 5px;
  outline: none;
}

input[type='range']::-webkit-slider-runnable-track {
  -webkit-appearance: none;
  height: 10px;
}

input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  background: #333;
  border-radius: 50%;
  box-shadow: -205px 0 0 200px red;
  cursor: pointer;
  height: 10px;
  width: 10px;
  border: 0;
}

input[type='range']::-moz-range-thumb {
  background: #333;
  border-radius: 50%;
  box-shadow: -1005px 0 0 1000px red;
  cursor: pointer;
  height: 10px;
  width: 10px;
  border: 0;
}

input[type="range"]::-moz-range-track {
  background-color: #ddd;
}
input[type="range"]::-moz-range-progress {
  background-color: red;
  height: 10px
}
input[type="range"]::-ms-fill-upper {
  background-color: #ddd;
}
input[type="range"]::-ms-fill-lower {
  background-color: red;
}

JavaScript（Babel）

class VolumeSlider extends React.Component {
  constructor() {
    super();
    this.state = {
      value: 12.5
    };
  }

  onUpdate(e) {
    this.setState({
      value: e.target.value
    });
  }

  render() {
    return (
      <div className="mb1">
        <input
          className="c-input--range"
          list="tickmarks"
          max={100}
          onChange={(e) => this.onUpdate(e)}
          step={0.1}
          type="range"
          value={this.state.value}
        />
        <div>
           <label className="c-label">{this.state.value}</label>
        </div>
      </div>
    );
  }
}

ReactDOM.render(
  <div>
    <VolumeSlider />
  </div>,document.getElementById("root")
);

下面的CodePen中也提供了代码。谢谢！

https://codepen.io/kcandle/pen/KKMrZKo

解决方法

您要为box-shadow的颜色分配变量

    input[type='range']::-webkit-slider-thumb {
      -webkit-appearance: none;
      --slider-thumb-background-color: #000;
      background: var(--slider-thumb-background-color);
      border-radius: 50%;
      --box-shadow-color: orange;
      box-shadow: -205px 0 0 200px var(--box-shadow-color);
      cursor: pointer;
      height: 10px;
      width: 10px;
      --border-color: orange;
      border: 3px solid var(--border-color);
    }
    
    input[type='range']::-webkit-slider-thumb:hover {
      --slider-thumb-background-color: grey;
      --box-shadow-color: red;
      --border-color: red;
    }
    
    input[type='range']::-webkit-slider-thumb:active {
      --slider-thumb-background-color: white;
      --box-shadow-color: blue;
      --border-color: blue;
    }