onSlideEnd called twice in IE11?

[pederjohnsen]

For some reason the onSlideEnd callback is being called twice for me in IE11, any idea why?

[diehell]

onSlideEnd call twice to when i make rangeslider as react components. How do i get around this?

[andreruffert]

@pederjohnsen @diehell what's the use case you both use the onSlideEnd cb for?

[diehell]

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?

[pederjohnsen]

@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

[andreruffert]

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'));

[treykane]

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?

[av01d]

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.

[andreruffert]

👀 https://github.com/andreruffert/range-slider-element

[Coder-Bytee]

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