Image Compare

Details

• Example of using a range input and CSS mask to compare two images positioned on top of each other.
• JavaScript is only used to pass the range value to a CSS variable that controls the position of the masks.
• Works on touch devices.

Considerations

• ::-moz-range-thumb and ::-webkit-slider-thumb weren't used to style the range handle, since styling options are limited.