Image Comparison Slider Gallery Block for React

Yes. A transparent range input covers the picture, so a mouse drag, a finger drag and a tap all place the handle; vertical swipes still scroll the page. That input is hidden from assistive technology and skipped by Tab; the labelled slider in the band is the accessible control and always shows the same value.

Tab to the slider ("Graded reveal"), then the arrow keys for 1%, Page Up and Page Down for 10%, Home and End for the edges. It is spoken as "62 percent graded, 38 percent original". Changing the picture is announced in a polite line.

The picture and the slider stay in the same order in every direction, since a before-and-after is a drawing, not text, so the graded side is always at the picture's left. On the Ark build the arrow keys follow the page direction while the handle does not, so use Home and End or Page Up when an RTL page matters.

Both sides are the same drawing. The original gets a lower contrast and a lifted brightness through a CSS filter; the graded side gets more contrast and deeper shadows, and a clip shows it up to the handle. Swap the filters for your own edited image where the code comment says so.

Replace the Scene in both layers with <img alt="" className="size-full object-cover" src={…} />, the original in one and your graded export in the other (drop the filters), and keep the two the same size. The picture's role="img" label already describes it.

No. The caption under the picture reserves its lines, and every picture has the same box, so the readout and the band keep their place.