Ползунок React Range работает, но кнопка ползунка не может быть перемещена

Question

Я пытаюсь создать простой слайдер диапазона, который будет взаимодействовать со стилями iOS для демонстрации. Это работает, цвет меняется для бара, когда я перетаскиваю его нормально. Но ползунок не может быть перемещен. Он просто застрял в одной позиции. Я новичок в этом и уверен, что это должно быть что-то маленькое, что игнорируется, но я не уверен. Любая помощь будет оценена. Вот мой код:

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>

Пример Код Песочница

Комментарий / комментарий value="20" и обратите внимание на застревание / освобождение кнопки ползунка.