html5 диапазон типов ввода всегда указывает на минимальное значение и не получает onChange при вводе текста

Question

Я пытаюсь использовать тип ввода текста вместе с диапазоном типов ввода, где есть три варианта использования.1. defaultcase: при загрузке страницы ползунок должен указывать на значение, указанное в поле ввода текста.2. когда пользователь вводит текстовое значение, указатель ползунка также должен обновляться.3. когда пользователь использует ползунок для изменения значения, текстовое значение должно обновляться.

В моем коде ниже

1. В случае по умолчанию: в диапазоне типов ввода, когда я задаю defaultValue = "200", указатель ползунка всегда указывает на минимальное значение.
2. Когда я ввожу значение в текстовую область, ползунок не обновляется.

Я пытался исправить это, но не смог.

          if (
          Type == "integer" &&
          LowerBound &&
          UpperBound !== 0
        ) {
          editComponent = (
            <div className="SettingsTreeValueNode__InputField">
              <input
                type="text"
                pattern="[0-9]*"
                ref="text"
                value={this.state.value}
                oninput={this.handleinputChanged.bind(this)}
                className="inputtext"
                onBlur={e => this.focusOfInputLost(e)}
              />
              {LowerBound}
              <input
                type="range"
                className="sliderinput"
                defaultValue="200"
                min={LowerBound}
                max={UpperBound}
                step="1"
                oninput={this.handleSliderChange.bind(this)}
                onMouseUp={this.handleWhenMouseReleased.bind(this)}
              />
              {UpperBound}
            </div>
          );
        }
        handleSliderChange(event) {
      var value = event.target.value;
      var slidervalue = parseInt(value);
      this.setState({ value: slidervalue });
    }

    handleInputChanged(event) {
    var value = event.target.validity.valid
     ? event.target.value
     : this.state.value;
    this.setState(
      {
       value: value,
       inputValid: this.isInputValid()
      });
      }

´´´[![slider along with text area][1]][1]


  [1]: https://i.stack.imgur.com/w5MZ6.png

Answer 1

Нижеприведенный код решит ваши проблемы, используйте только один объект состояния для отображения значения в обоих элементах управления, теперь он будет работать в обоих направлениях: либо изменить значение на входе, либо на ползунке.

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      value: ""
    };
  }

  handleSliderChange = (event) => {
    var value = event.target.value;
    var slidervalue = parseInt(value);
    this.setState({ value: slidervalue });
  }

  handleInputChanged = (event) => {
    var value = event.target.validity.valid
      ? event.target.value
      : this.state.value;
    this.setState(
      {
        value: value
      });
  }
  render() {
    let LowerBound = 0;
    let UpperBound = 200
    return (
      <div>
        <button onClick={this.handleCopy}>click me</button>
        <div className="SettingsTreeValueNode__InputField">
          <input
            type="text"
            pattern="[0-9]*"
            ref="text"
            value={this.state.value}
            onInput={this.handleInputChanged}
            className="inputtext"
          />
          {LowerBound}
          <input
            type="range"
            className="sliderinput"
            defaultValue="200"
            min="0"
            max="200"
            step="1"
            value={this.state.value ? this.state.value : UpperBound}
            onInput={this.handleSliderChange}
          />
          {UpperBound}
        </div>
      </div>
    );
  }
}
export default App;