Question

我正在尝试创建一个简单的范围滑块以使用iOS风格的React进行演示。它可以正常工作，当我将其拖动到合适的位置时，颜色会发生变化。但是滑块按钮无法移动。它只是卡在一个位置上。我是新来的人，很确定它一定是被忽略的小东西，但我不确定。任何帮助将不胜感激。这是我的代码：

export class RangeSwitch extends Component {
  onChangeHandler = e => {
    const initValue = e.target.value;
    const min = e.target.min;
    const max = e.target.max;

    let value = (initValue - min) / (max - min);
    e.target.style.backgroundImage = [
      '-webkit-gradient(',
      'linear, ',
      'left top, ',
      'right top, ',
      'color-stop(' + value + ', #007aff), ',
      'color-stop(' + value + ', #b8b7b8)',
      ')',
    ].join('');
  };

  render() {
    return (
      <SwitchContainer>
        <input
          type="range"
          min="1"
          max="100"
          value="20"
          id="range"
          onChange={this.onChangeHandler}
        />
      </SwitchContainer>
    );
  }
}

Answer 1

要取消粘贴滑动按钮，您需要从value="20"内的<input>元素中删除<SwitchContainer>

示例Code Sandbox

注释/注释value="20"，并注意到滑块按钮被卡住/释放。

React Range Slider可以使用，但是Slider Button不能移动

1 个答案:

示例Code Sandbox