Styling range input with pure CSS as separation between images

I have two images, and I need to compare them really precisely, so I want to put them one under the other and allow the user to slide the top one to discover the other one under. I decided to use a input range to slide the image.

I want to style a range input to become the separation between two pics. As you can see on my example fiddle (https://jsfiddle.net/up068q4q/55/) I'm pretty close BUT I need to fire event with a mouse click on my first image.

I tried to size my input equal to my image but it going over and block mouse event.

I add few rules, the size of my image can change when the window is resizing, and I didn't manage to change the CSS dynamically for range input so I thought pure CSS will be a good solution.
Increasing the height of the thumb (moving part of the range input) look like a good idea but i don't know how to trigger it...

$('myInputRange').css('height', pictureSize)

Does really not the job...

Any help would be greatly appreciated =)