Generate a before/after image slider block
Before/after sliders are one of the few blocks where the interaction itself is the content. You drag a handle across two overlaid images and see the transformation. Photographers, designers, and renovation services use them heavily.
Most implementations use a 10KB+ JavaScript library and do not handle accessibility (keyboard drag, reduced motion, screen reader labels) well.
Why generate it instead of installing an existing plugin?
Plugins like Image Compare Before and After work but load jQuery UI for the drag. That is ~40KB of library for a slider. On mobile it feels laggy because the events are not passive.
A generated block uses native pointer events, CSS clip-path for the split, and is under 2KB JS. Keyboard accessible: Left/Right arrows move the split 5% each; Home/End snap to edges. Each image has an alt that names the state ("before" / "after") so screen readers announce correctly.
Reduced-motion respect: users with that setting see a split-view layout instead of a draggable one. Your content is still accessible to all.
Example prompt
This is the kind of description that generates this plugin. You can start from it and tweak whatever you need before hitting generate.
Plugin name: Acme Before After
Block acme/before-after with attributes:
- image_before (id + url + alt)
- image_after (id + url + alt)
- label_before, label_after (optional)
- default_position (0-100, default 50)
Render: two absolute-positioned <img> with the "after" clipped by a CSS variable --split.
A draggable handle in the middle, styled as a vertical line with a circular grip.
Interaction:
- Pointer events (mousedown/touchstart equivalents) update --split.
- Keyboard arrows move by 5%.
- Home/End snap to 0/100.
- aria-valuenow on the handle reflects current split percentage.
Reduced motion: render as two side-by-side images with no draggable split.
Aspect ratio locked to the before image; after is scaled to match.What the generated plugin typically includes
- Block with before/after image + optional labels
- CSS clip-path split driven by a CSS variable
- Native pointer event drag (no library)
- Keyboard accessible: arrows, Home/End
- Reduced-motion fallback: static side-by-side
- Aspect-ratio locked to before image
Default split, labels, and image constraints are block attributes. For galleries with multiple comparisons, we recommend a parent block containing several of these.
Frequently asked questions
What if the two images have different dimensions?
The block uses the before image as the reference and scales the after to match via object-fit: cover. For faithful comparison, ensure the images are the same size.
Performance on mobile?
Smooth at 60fps on mid-range Android because we use passive pointer events and transform-only updates. No layout thrashing.