Set state when input value changed by a slider - ReactJS

Question

So I'm using this Foundation slider: click for doc. In order to access slider's current value they recommend using hidden input like so:

<div class="slider" data-slider data-initial-start="50" data-end="200">
 <span class="slider-handle"  data-slider-handle role="slider" tabindex="1">
 </span>
 <span class="slider-fill" data-slider-fill></span>
 <input type="hidden">
</div>

What I want to do is display the value next to the slider using some variable. My idea is to listen to changes made to the input's value using something like onChange() and setting it to a function that sets the state thus calling render function with an updated value. The problem is that this only works if user enters the value and when it's being altered by the slider it does not call onChange() or any other function I tried. Here's my code:

Function that's supposed to be triggered:

  onValueChange: function () {
   this.setState({
    setTemp: this.refs.location.value
   });
 },

Inside render function:

var {setTemp} = this.state;

<div className="controlPanel">
    <div className="slider vertical" data-slider data-initial-start={curTemp} data-step="5" data-end="110" data-vertical="true">
         <span className="slider-handle" data-slider-handle role="slider" tabIndex="1" onClick={this.onValueChange}></span>
         <span className="slider-fill" data-slider-fill></span>
         <input id="tempInput" type="hidden" ref="location" onChange={this.onValueChange}/>
    </div>
 </div>
      <div className="currentStats">
        Temp: {setTemp}
      </div>

I tried adding onClick, onMove functions on the slider itself and it does work but I want the function to be called only when the slider's value is changed

Any ideas?

react-slider code that you can refer to - github.com/mpowaga/react-slider/blob/master/react-slider.js — vijayst

sam sam · Accepted Answer · 2017-06-03T14:06:02

According to its documentation, you can listen to moved.zf.slider event.

$('.slider').on('moved.zf.slider', function() {
    // update state
}

Or you can bind the slider to external input and get the value of input:

<div class="small-10 columns">
  <div class="slider" data-slider data-initial-start="50">
    <span class="slider-handle"  data-slider-handle role="slider" tabindex="1" aria-controls="sliderOutput1"></span>
    <span class="slider-fill" data-slider-fill></span>
  </div>
</div>
<div class="small-2 columns">
  <input type="number" id="sliderOutput1">
</div>

reference: http://foundation.zurb.com/sites/docs/slider.html#js-events

Set state when input value changed by a slider - ReactJS

1 Answers