kylewetton / image-compare-viewer

Compare before and after images, for grading and other retouching for instance. Vanilla JS, zero dependencies.
https://image-compare-viewer.netlify.com
MIT License
554 stars 34 forks source link

Allow mouse drag to continue when the cursor is outside the image? #68

Open JaneSmith opened 1 month ago

JaneSmith commented 1 month ago

Hello. I've been trying several different image comparison sliders, trying to find the best one for my personal project. Yours is the closest to perfect that I've found — thank you!

There's one issue that I have: when clicking and holding the mouse button to drag the slider, if the mouse cursor moves outside of the image, it no longer affects the slider. Further mouse movements are ignored, as long as they are outside of the bounds of the image.

This is a problem for two reasons:

  1. It requires more attention from the user to keep the mouse cursor over the image while dragging, instead of being able to just hold the mouse button down and then swipe the mouse around casually.
  2. When making fast mouse movements all the way to the left or right, the slider loses part of the movement, instead of sliding all the way as expected. For example, with a left/right slider, if you grab the slider and move the mouse all the way to the right, that should fully reveal the left image (i.e. slider at 100%). But if the movement is fast enough, the slider will be left at ~60-80% of the way, leaving the right image partially exposed.

I hope I worded that clearly enough.

Other image comparison sliders do not have this behaviour. For example, img-comparison-slider and slick-image-compare. With those, you can click and drag, move the mouse outside of the image, and the input will continue to work.

Could this functionality be brought over?