title: React - input range with default step as an array of values
body: <p>While working on a React Component, I'm trying to set a specific range of values to determine the <code>step</code> on a type range input.</p>
  
  <p>I'm able to reproduce the desired behavior with vanilla HTML and JS i.e.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;!-- custom step range --&gt;
  &lt;div class="step"&gt;
    &lt;input id="input" type="range" min="0" value="0" max="4" step="1" list="tick-list"&gt;
    &lt;datalist id="tick-list"&gt;
      &lt;option&gt;0&lt;/option&gt;
      &lt;option&gt;1&lt;/option&gt;
      &lt;option&gt;2&lt;/option&gt;
      &lt;option&gt;3&lt;/option&gt;
      &lt;option&gt;4&lt;/option&gt;
  &lt;/datalist&gt;
    &lt;span id="output"&gt;&lt;/span&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>var values = [10,25,50, 75, 100];
  
  var input = document.getElementById('input'),
     output = document.getElementById('output');
  input.oninput = function(){
      output.innerHTML = values[this.value];
  };
  input.oninput();
  </code></pre>
  
  <p>see codepen <a href="https://codepen.io/tonkihonks/pen/qBWqMNZ" rel="nofollow noreferrer">here</a></p>
  
  <p>However, not able to achieve the same results when trying to wire this same functionality to React. </p>
  
  <p>i.e.</p>
  
  <pre><code>class App extends Component {
    constructor() {
      super();
      this.state = {
        values : [10, 25, 50, 75, 100]
      };
    }
  
    handleInputChange = () =&gt; {
      const input = document.querySelector('input'),
      const output = document.getElementById('output');
      output = this.state.values;
    };
  
  
    render() {
      return (
        &lt;div&gt;
          &lt;input
            oninput={this.handleInputChange()}
            type="range"
            min="0"
            value="0"
            max="4"
            step="1"
            list="tick-list" /&gt;
          &lt;datalist id="tick-list"&gt;
            &lt;option value="0" /&gt;
            &lt;option value="1" /&gt;
            &lt;option value="2" /&gt;
            &lt;option value="3" /&gt;
            &lt;option value="4" /&gt;
          &lt;/datalist&gt;
          &lt;span id="output"&gt;{this.state.values}&lt;/span&gt;
        &lt;/div&gt;
      );
    }
  }
  
  render(&lt;App /&gt;, document.getElementById('root'));
  
  </code></pre>
  
  <p>The above doesn't let me move the slide nor outputs the steps one at time.</p>
  
  <p><strong>How could I wire this properly using React JS?</strong>
  Ps: Feel free to provide an example as a functional component rather than a class.</p>