Open pederjohnsen opened 8 years ago
onSlideEnd call twice to when i make rangeslider as react components. How do i get around this?
@pederjohnsen @diehell what's the use case you both use the onSlideEnd
cb for?
Used onChange on react within a component with ReactCSSTransitionGroup,onChange function triggered twice ONLY on IE11. Currently using timeout to rectify it. Hopefully in some time, i'll come out with a jsbin to simulate the behavior.
Otoh, can you explain when is the right condition for one to utilize the onSlideEnd,onSlide callback events?
@andreruffert we currently use rangeslider for a progress bar and onSlideEnd sets the values on the model etc. This is only an issue to us because of how the progress bar functions: If the progress bar is currently set to 0 it will increment to 5 (if you just click on the handle without sliding), so when moving it from a value higher than 0 to 0 and the callback fires twice, it get's set to 5 on the second fire essentially stopping it from ever being set to 0.
As @diehell we've also temporary solved this using a timeout
I implemented the callback functions really just for edge cases where u need to know the position
of the handle etc.
It's always better to go with native events. I think in your case you guys could simply use the native change
event instead of the onSlideEnd
cb.
e.g.
$('input[type=range]').on('change', _ => console.log('do something onSlideEnd'));
This issue is not only an issue with IE 11, I'm experiencing it in all browsers.
I'm using this in the capacity of a filter and on certain value positions its changing content on the page.
So the proposed work around solution will not work for my needs, as I also need to fire off a particular function based on value and position.
I'm sure I can write another function to do this, but at that point, why am I even using your plugin?
This issue is caused by the fact that both pointerup
and touchend
events are fired at slide end. Nowadays, all browsers seem to implement pointer events (See https://mobiforge.com/design-development/html5-pointer-events-api-combining-touch-mouse-and-pen for more info).
So... changing a few lines of code in rangeslider.js fixes this issue:
Change lines 48-50 from this:
startEvent: ['mousedown', 'touchstart', 'pointerdown'],
moveEvent: ['mousemove', 'touchmove', 'pointermove'],
endEvent: ['mouseup', 'touchend', 'pointerup']
to this:
startEvent: ['pointerdown'],
moveEvent: ['pointermove'],
endEvent: ['pointerup']
And the double event firing is a thing of the past. Tested on latest versions of FF, Edge, Chrome and Safari, and Safari on iOS.
I have a function that accepts the parameter of input range id if i am calling the same function for two different input ranges in Safari both the input range slider are moving at the same time
For some reason the onSlideEnd callback is being called twice for me in IE11, any idea why?