Component · fallback

Without JavaScript

The comparison is shown, stopped where --cs-position puts it — here at 38 %, set in the stylesheet of this page. Both images are loaded, both labels are readable, the seam is in the right place : nothing is broken, nothing is hidden.

The slider, on the other hand, is removed. There is no way at all to tie an <input type="range"> to a custom property without a script ; leaving in place a control that moves without moving anything would be a lie, and it would have had to be made focusable in order to lead nowhere. So it goes, rather than pretend.

The renovated room: limewashed walls, pale oak floorboards, a linen sofa under the window, a marble fireplace.

The same room before the works: flaking plaster, a stained ceiling, a dusty concrete floor, a cast iron radiator.

Before After

What stays, and what goes

Stays: both images, at their size, overlaid to the pixel
Stays: the seam, the handle, both labels
Stays: the position, set in CSS through --cs-position
Goes: the slider, and with it dragging and the keyboard