search

andreruffert / rangeslider.js

🎚 HTML5 input range slider element jQuery polyfill
https://rangeslider.js.org
MIT License
2.16k stars 401 forks source link

Use with ReactJS - only working if polyfill set to false #180

Closed simonswiss closed 8 years ago

simonswiss commented 8 years ago

I am trying to use this great range slider with React.

If polyfill is set to false, tracking events like onInput or onChange work perfectly. As soon as polyfill is enabled, the event listeners completely stop working. Is there any reason for that?

Anyone else successfully using this slider with React?

andreruffert commented 8 years ago

Hi @simonswiss if you pass {polyfill: true} (default setting) the rangeslider.js feature detects if the browser has native support for the <input type="range"> element. If so it will do nothing and don't execute the other code. Otherwise it will polyfill the range slider element.

If you want to use rangeslider.js in every browser and create a range slider element just pass {polyfill: false}.

As soon as polyfill is enabled, the event listeners completely stop working. Is there any reason for that?

If you add your event listeners to the <input type="range"> element rangeslider.js will not change anything here. I guess there must be another reason for that...

If you have some code examples I could have a look if you want.

:v:

simonswiss commented 8 years ago

Makes sense, thanks!

I managed to get it working by initiating the range slider inside the React componentDidMount() lifecycle hook, and using the setState() method in the rangeslider onSlide() event. Works great now!

Thanks for the initial pointers!