title: Handle Sliders dynamically using slider from Material-UI
body: <p>I want to generate a sliders dynamically according to user input, and don't know how to save values on change. Following is the code given of my implementation.
  The problem is that I can't get value via event.target.value
  // priceCities is an array of objects:</p>
  
  <pre><code>handlePrices(priceCities){
  
          return   priceCities.map( (cstate, index) =&gt; (
               &lt;li key={index}  &gt;{cstate.name}  &lt;Slider key={index} min={3} max={500}  step={1} style={{height: 100}} axis="y" 
              defaultValue={5}  id ={cstate.id} onChange={ this.handleSlider.bind(this,cstate.id )}  value={this.state.values[cstate.id] }   /&gt;   &lt;span&gt;{this.state.values[cstate.id]}&lt;/span&gt; &lt;/li&gt; 
          ));
  
  }
  
  
  this.state = {
      values: []
  }
  </code></pre>
  
  <p>and <code>onChange()</code> method here:</p>
  
  <pre><code>   handleSlider ( event,i ) {
  
     // this.state.sliderValue[event.target.id] =  event.target.value;
      //console.log('handlerslider'+event.target.id+' '+event.target.value);
      let values = [...this.state.values];
      values[i] = event.target.value;
      this.setState({ values });
  }
  </code></pre>