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.

Front view of Halo Spartan

Back view of Halo Spartan