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

Wilds

working for me can you try to reproduce? – Carefree

where should i write this: onChangeSlide()? – Wilds

I am writing this in componentDidMount() – Wilds

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 />

Carefree

thanks it works for me.I was adding function in wrong place. – Wilds

is there any way i can get the integer values on tooltip? – Wilds

@Wilds you mean? and why you want to do that? – Carefree

when i slide values showing on tooltip is 120.00 i want 120. – Wilds

you can use var a = new Number('120.00'); – Carefree

@Wilds no idea about that you can ask here github.com/algolia/react-nouislider – Carefree