How to get react noUiSlider min max values on update?

Question

I am trying to use noUiSlider to filter my results. I used noUiSlider component to show slider. Slider is showing but i am not able to get min max values on slide. I want to show integer min max values in text box and use them for filter.

this is how i import noUislider

import '../../node_modules/nouislider/distribute/nouislider.css';
import Nouislider from 'react-nouislider';

<Nouislider
range={{min: 0, max: 800000}}
start={[20000, 500000]}
onSlide={this.onChangeSlide.bind(this)}
ref="NoUiSlider"
tooltips/>

I used onchange slide method to get values but its not working

onChangeSlide(){
   console.log(this.refs.NoUiSlider.slider.get()) // logs the value
}

How can i get values Please help me

Answer 1

onSlide callback is already giving you a data, you just need add variable to get the data.

onSlide={(data)=> console.log(data)}

check this

Demo

You can just add onChangeSlide as normal function. if you want to get data inside that.

 onChangeSlide(data) {
    console.log(data) // logs the value
  }


 <Nouislider
        range={{ min: 0, max: 800000 }}
        start={[20000, 500000]}
        onSlide={this.onChangeSlide.bind(this)}
        ref="NoUiSlider"
        tooltips />