Compare Images

This type of item is used to show before/after views or, as in this case, under and over by dragging the slider.
To make it suitable for responsive pages each image is inserted in two sizes. This is done using an HTML5 <pictire> element so that the images can have alt text for screen readers and search engines.
The drag handle has a control to set it at any position on page load. The default is 50%.
Clicking either label will cause the drag handle to jump aside.
Labels
The text in the labels can be edited.
The labels have controls for font, web safe fallback font and font size. The labels have individual controls for font color and backgroud color and its opacity.
The label position on the X and Y axis can be adjusted if required.
Drag Handle
The handle has controls for setting the background color and its opacity and the arrow color.
Overlay
The optional centered overlay can be positioned at the top or bottom and animate in from the left or right. The animation can occur once or every time the item enters the viewport.
There's checkbox for turning of the overlay on mobile phones where it will obscure the drag handle.