范围滑块反应悬停，按下和聚焦答案

【问题标题】：Range Slider React hover, pressed and focus范围滑块反应悬停，按下和聚焦
【发布时间】：2020-11-13 05:43:41
【问题描述】：

我有一个使用 React(Babel) 和 CSS 制作的范围滑块。我想弄清楚如何添加悬停、活动和焦点效果（更改拇指和滑块左侧的颜色）。我试过直接将:hover 添加到input[type='range']::-webkit-slider-thumb 但这不起作用。我相信我的主要问题源于滑块的左侧部分使用box-shadow 进行样式设置，但我还没有在文档或谷歌搜索中找到任何其他方法来处理这个问题。感谢您提供任何帮助或建议！

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

【问题讨论】：

标签： javascript css reactjs slider babeljs

【解决方案1】：

您想为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;
    }

【讨论】：