JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="app"></div>

Babel + JSX

class Range extends React.Component {
  state = {
    value: 0,
  }

  handleChange = e => {
    this.setState({
      value: this.getAdjustedValue(e.target.value),
    });
  }

  getAdjustedValue = val => {
    return this.props.steps.reduce((p, c) =>
      Math.abs(p - val) < Math.abs(c - val) ? p : c
    );
  }

  render() {
    const
      { steps } = this.props,
      min = steps[0],
      max = steps[steps.length - 1];

    return (
      <div>
        <input
          type="range"
          min={min}
          max={max}
          value={this.state.value}
          onChange={this.handleChange}
        />
        <p>{this.state.value}</p>
      </div>
    );
  }
}

ReactDOM.render(
  <div>
    <Range steps={[ 0, 500, 1000, 5000, 10000 ]} />
    <Range steps={[ -5, 10, 100, 150, 187, 211 ]} />
  </div>,
  document.getElementById('app')
);