instead of drag event a hoover event

[MarzV]

Hey, your before-after is great, its light weight! end easy the use. Can you give some advise how to make the drag event a hoover event. So I can compare the images just by hovering over the images?.
Your help would be much appreciated and I good do some device testing for you with my browserstack account, just name the devices that you woud like to test your slider on.

[tatarjr]

Hey @MarzV,

Replacing the mousedown and mouseup events with mouseover and mouseout events kinda work, but it needs to be optimised a bit.

More specifically, the drag button slides back a bit when you're moving the mouse around and it stops the slider when it stops hovering over the drag element because of that sliding distance.

I think you can circumvent this by binding the mouseout events to the container instead of the drag element.

Hope this helps.

Also, please note that I have no idea how this would work on mobile, so proceed with caution on that front.

Thanks for the browserstack offer, I'll let you know if sth comes up 👍

[MarzV]

Tnkz tatarjr fof swift reply and your directions.
Let me know about the devices test when you need it

[MarzV]

Tatarjr, I struggle with this part of your advice:

I think you can circumvent this by binding the mouseout events to the container instead of the drag element.

Please could you be more specific.?. Code example much appreciated..

[tatarjr]

Hey @MarzV, look at lines 48 & 53 in the main js file.

Those mouseup events are bound to the dragElement, you need to alter the script so that those events are bound to the container element.

There's a non-plugin version on Codepen, you may find it easier to fork that and play around with it.