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

working for me can you try to reproduce? – Just code Jan 07 '19 at 07:05 — Just code, Jan 07 '19 at 07:05
where should i write this: onChangeSlide()? – Vinay Jan 07 '19 at 07:10 — Vinay, Jan 07 '19 at 07:10
I am writing this in componentDidMount() – Vinay Jan 07 '19 at 07:10 — Vinay, Jan 07 '19 at 07:10

Just code · Accepted Answer · 2019-01-07T07:17:19.733

5

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

edited Jan 07 '19 at 07:17

answered Jan 07 '19 at 07:12

Just code

13,553
10
51
93

thanks it works for me.I was adding function in wrong place. – Vinay Jan 07 '19 at 07:18
is there any way i can get the integer values on tooltip? – Vinay Jan 07 '19 at 07:20
@Vinay you mean? and why you want to do that? – Just code Jan 07 '19 at 07:21
when i slide values showing on tooltip is 120.00 i want 120. – Vinay Jan 07 '19 at 07:23
you can use `var a = new Number('120.00');` – Just code Jan 07 '19 at 07:24
@Vinay no idea about that you can ask here https://github.com/algolia/react-nouislider – Just code Jan 07 '19 at 08:03

How to get react noUiSlider min max values on update?

1 Answers1