Hairline Compare

A compare slider with a hairline divider - for retouching, colour grading, renovation, product and architecture work.

Drag it, click anywhere to jump, or switch to Hover so the divider follows the pointer. Horizontal or vertical.

Keyboard accessible: the slider takes focus and moves with the arrow keys (Shift for bigger steps, Home and End for the edges). Screen readers get a proper slider with its value.

Start sets where the divider sits on load. The line width and colour, the round handle and its size are all in the panel, and the handle can be hidden for a cleaner look.

Labels: Before and After text in any font, placed at the edges and readable on light and dark photos.

Radius for rounded frames. Touch friendly: dragging sideways moves the slider, dragging up and down still scrolls the page.

Ships with a demo pair (an ungraded and a graded photograph) so it works the moment you drop it in.

Zero dependencies, no network. On the canvas it renders at the start position.

Built by KHZ ART, a Tokyo studio working in editorial and fashion.