search

react-component / slider

React Slider
https://slider.react-component.now.sh/
MIT License
3.04k stars 767 forks source link

onBeforeChange is fired multiple times #492

Open ethansisson opened 5 years ago

ethansisson commented 5 years ago

onBeforeChange fires between two and three times every time I click the handle or the track. I haven't noticed this happening when I click and drag the handle.

brenoos commented 5 years ago

I'm getting the same problem with onAfterChange, did you get the solution?

LarsEllefsen commented 5 years ago

Same issue here, but on "onAfterChange"

anarchistgeek commented 5 years ago

+1. Apparently, this is introduced in 8.6.3 and 8.6.4

ciulic commented 5 years ago

+1 On click I have these events being fired: onSliderBeforeChange onSliderBeforeChange onSliderChange onSliderAfterChange onSliderBeforeChange

meikidd commented 5 years ago

Same here +1. And for those who looking for solution, it is mentioned in #495 that version 8.6.1 works well. @brenoos

xieqingtian commented 5 years ago

Same issue here, when I click the sliderBar
https://codesandbox.io/s/843r09wk6l

BrandonMathis commented 5 years ago

For onAfterChange, perhaps it is related to this event being fired on ontouchend or onmouseup is triggered?

Seems that onAfterChange happens durring the onEnd event which is fired onBlur. I am starting to think that onBlur happens but then I am done dragging my slider (when I mouseup to let go) and when I loose focus of the slider (click on anything other than the slider).

abhijit-padhy commented 5 years ago

Hi Owner, Can you add e.stopPropagation(); at the end of end() method inside slider.js and then try.

LihayMorad commented 5 years ago

Same here +1. And for those who looking for solution, it is mentioned in #495 that version 8.6.1 works well. @brenoos

Thanks, I downgraded to v8.6.1 and it solved the problem for now (for onAfterChange).

a-borodko commented 4 years ago

Any change on this? Downgrading is not an option for me, I need latest version features.

dasl- commented 2 years ago

I believe I have a fix.

Background: in version 8.6.1, clicking the rail (aka the "track") resulted in three events firing: onBeforeChange, onChange, and onAfterChange. This was the correct behavior.

In subsequent versions, the correct events were not always firing. Sometimes too few or sometimes too many would fire.

For instance, in version 9.7.5, we fired too many events: onBeforeChange, onChange, onBeforeChange, onAfterChange.

In version 10.0.0-alpha.5, we fire too few events: onChange, onAfterChange.

I have a patch that fixes the event firing in v10: https://github.com/react-component/slider/pull/822 . I hope it gets merged soon. Until my patch gets merged, you can use my fork instead. Update your package.json like so: https://github.com/dasl-/piwall2/commit/e7becfb1c9aa03ea60b60f7ba382df850e1ac274#diff-012b982f97a0d326aeec58dd3b789484b05a944d609afe1b8ed5e299fc485f61

Then you will be using my fork of v10: https://github.com/dasl-/slider/tree/click-rail-publish

dasl- commented 2 years ago

my fix was merged: https://github.com/react-component/slider/pull/822