title: React - Dynamic Slider
body: <p>I am trying to use react-rangeslider dynamically. Depending on the size of an array, that many sliders should be rendered. The problem is, I am unable to get them to reference different values. Right now, the Sliders are all referencing the same value and therefore all updating the same. I would like each Slider to act independently.  </p>
  
  <p>The problem I have encountered when trying to solve this is since the Slider is created in the for loop, the index (i) has reached the end (The component is rendered arr.length times) and so I cannot use this as a way to index into an array of values where each index is associated to each slider.</p>
  
  <pre><code>//value is set as a state i.e. value: 5    
  
  for(var i = 0; i &lt; arr.length; i++){
      &lt;Slider
       min={0}
       max={10}
       value={value}
       orientation="horizontal"
      onChange={this.handleOnChange}
    /&gt;
  }
  
    handleChange = value =&gt; {
     this.setState({
      value: value
    })
   };
  </code></pre>