Act as a front-end engineer with an eye for craft. Build a before-and-after slider for {{business_name}}, a {{business_type}}, to show results honestly. Style: {{visual_style}}. Keep the existing image component. Control: - use a native range input as the control, visually styled as the divider handle, so keyboard and screen reader support come built in; set aria-valuetext like "60 percent after" - arrow keys move 1%, Page Up and Page Down 10%, Home and End to the ends - pointer: drag anywhere on the image using pointer capture; touch-action: pan-y so vertical page scrolling still works on phones; tapping a point jumps there - handle 44px, with a 2px line and a visible focus ring Rendering: both images stacked in one aspect-ratio box; the after image revealed with clip-path inset, so dragging never triggers layout; starts at 50%. Honesty: before and after share the same crop, angle and lighting as closely as possible; if the after is retouched beyond color correction, say so in the caption. Ask me for the real pairs; don't generate them. Labels: "Before" and "After" as visible text tags in the top corners that stay readable and move aside rather than being covered; a caption below saying what changed. Alt text describes each image on its own. Alternatives: a toggle to side-by-side view for people who can't drag; at 360 side-by-side stacks vertically. Layout: 1280: max width 960px centered, or 7 columns with text in 5; 768: full width; 360: full bleed with captions in the gutter. Multiple pairs: a list, not a carousel. States: loading keeps the box with a skeleton; if one image fails, show the other with a message; images of different sizes are flagged in the console in development. Motion: none on load; the handle eases 150ms on tap jumps; instant under prefers-reduced-motion. Avoid: hover-only reveals, an auto-sweeping intro animation, mismatched crops that flatter the result.