Как сделать разный шаг ползунка в React?

Question

[qfrontend]

Как сделать, чтобы ползунок ходил с разными шагами, к примеру (500, 1000, 5000, 10000)?

class Range extends Component {
  state = {
    value: "0",
    step: "500"
  };
  handleChange = event => {
    let eValue = event.target.value;
    let step = this.stepRange(eValue);
    this.setState({ value: eValue, step: step });
  };
  stepRange = eValue => {
    if (eValue > 1000) {
      return 5000;
    }
    if (eValue > 5000) {
      return 10000;
    }
    return 500;
  };
  render() {
    return (
      <div>
        <input
          type="range"
          min="0"
          max="10000"
          value={this.state.value}
          onChange={this.handleChange}
          step={this.state.step}
          className={modRange.inputRange}
        />
        <p>{this.state.value}</p>
      </div>
    );
  }
}

Answer 1

[0xD34F]

Пусть компонент через props получает список допустимых значений:

<Range steps={[ 500, 1000, 5000, 10000 ]} />

А по событию change ищите среди них ближайшее к установленному пользователем:

class Range extends React.Component {
  state = {
    value: this.props.steps[0],
  }

  onChange = ({ target: { value } }) => {
    this.setState({
      value: this.props.steps.reduce((closest, n) =>
        Math.abs(closest - value) < Math.abs(n - value) ? closest : n
      ),
    });
  }

  render() {
    const { steps } = this.props;

    return (
      <div>
        <input
          type="range"
          min={steps[0]}
          max={steps[steps.length - 1]}
          value={this.state.value}
          onChange={this.onChange}
        />
        <p>{this.state.value}</p>
      </div>
    );
  }
}

Похоже на то, что вам нужно?

Comments

[qfrontend]

Да спасибо :) Как можно сделать перемещение ползунка плавным?

[0xD34F]

Тут следует понимать, что плавной смены состояния у элемента input нет. Её можно лишь имитировать - устанавливая последовательные значения между старым и новым. Типа, старое значение 10, новое 20 - делаем setInterval, поочерёдно выставляем 11, 12, 13, ... 20. При этом, выглядеть плавно это будет не всегда - если количество шагов между максимальным и минимальным значениями меньше ширины элемента в пикселях, то рывки неизбежны. В общем, сомнительное решение. Наверное, лучше будет сделать собственный компонент интервала (или взять готовый), и анимировать его с помощью css.

UPD. Шаг можно высчитывать динамически, тогда плавно будет всегда. Но код какой-то стрёмный получается.