How to get value? about react-nouislider

[backnotprop]

I used ref for this.

<Nouislider
    range={{
        min: 0,
        max: 7
    }}
    onSlide={this.onChangeSlide.bind(this)}
    ref="NoUiSlider"
/>

and within the ref object you can access slider.get()

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

[vvo]

If we ever expose this get method it would be in a React way but that I do not know how, any idea @bobylito?

Otherwise, what you can do right now is use events: https://github.com/algolia/react-nouislider/blob/master/index.js#L18

• props.onUpdate
• props.onSlide
• props.onChange

They all relate to http://refreshless.com/nouislider/events-callbacks/

[isaachinman]

@vvo Thanks, but what point is there in an onSlide event if you can't return the value?

[vvo]

From reading the nouislider configuration I think inside the event listener you can use this.get() to get the actual values.

And even the arguments should contain all the information you need: http://refreshless.com/nouislider/events-callbacks/#section-binding

let me know

[isaachinman]

Yup, it works with the three events you've defined. Cheers.

EDIT: this.get is not a function. Not yet sure if this is a scope problem or an issue with the actual component.

[vvo]

Might be a binding issue, wanna help sovling it?

[vvo]

Awesome, thanks for feedback!!!

[asherwebb]

I am able to get the onSlide property to work. This is dispatching an action to a redux store in my case and I am able to successfully capture the range low and range high values. The only issue is that the handles will not move - as if the components onSlide property was providing for the handle animation and placement and by 'hijacking' this prop to be used by react that functionality is broken

[vvo]

Maybe you need the default nouislider css? https://github.com/leongersen/noUiSlider/blob/master/distribute/nouislider.css

If so, can you add this to the documentation? Thanks.

[asherwebb]

Thank you for the advise. I had the css in my code. After examining it looks like the problem is that the <Nouislider /> object is re-rendering every time the onSlide event fires.

[vvo]

Yes, clearly I would advise now to use the airbnb slider which is full react and better suited, http://airbnb.io/projects/rheostat/

[asherwebb]

Cool thanks again - I will check that out. Got it working by passing in start array params based on props gathered by onSlide 💯