skills.rest
r-senchuk
r-senchukCOMMUNITY
Explore all skills by this author →
GitHub

before-after-slider

Implement accessible before/after image comparison sliders with drag, touch, and keyboard support in Next.js.

Updated Mar 29, 2026
Search Tags:#accessibility#react#tailwind css#nextjs#slider#touch events#image comparison
One-click install
npx skills add https://github.com/r-senchuk/agentskills --skill before-after-slider-r-senchuk
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: before-after-slider
Source: https://github.com/r-senchuk/agentskills/tree/main/.agents/skills/before-after-slider
Command: npx skills add https://github.com/r-senchuk/agentskills --skill before-after-slider-r-senchuk

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Building an interactive before/after image comparison slider that works with mouse, touch, and keyboard input — while remaining accessible and compatible with static Next.js export — requires handling pointer events, ARIA slider semantics, image clipping, and mobile scroll interference, all of which are easy to get wrong. ## Core Features & Use Cases - Accessible Slider Component: Generates a BeforeAfterSlider.tsx React client component with role="slider", ARIA value attributes, and keyboard controls (Arrow keys, Home, End). - Touch and Mouse Drag Support: Handles pointer dragging with a ResizeObserver-based fix for the clipped before-image width and a non-passive touchmove fallback for mobile scroll interference. - Localization and Performance Guidance: Accepts beforeLabel/afterLabel props for i18n and applies lazy/eager image loading based on above-the-fold placement. - Use Case: A home renovation portfolio page needs a draggable divider comparing a living room photo before and after renovation; this Skill produces the component, page integration, and completion checklist. ## Quick Start Ask the agent to add a before/after image comparison slider to a page section, providing the before and after image paths, alt text, and desired aspect ratio.

Frequently Asked Questions about before-after-slider

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build a before/after image comparison slider in React?▼

Create a client component where the after image renders full-width underneath and the before image sits in an overlay container clipped via style.width controlled by a draggable handle. Track position as a 0–100 percentage from mouse or touch coordinates relative to the container bounds.

How to make an image comparison slider keyboard accessible?▼

Add role="slider" with aria-valuenow, aria-valuemin, and aria-valuemax to the drag handle, set tabIndex={0}, and handle ArrowLeft/ArrowRight for small steps plus Home/End for extremes. Include a visible focus ring for keyboard users.

Can I use next/image inside a before/after slider?▼

No, next/image with fill should not be used inside the slider because the clipping technique requires a plain img element with explicit style.width. Use standard img tags with draggable={false} and loading attributes instead.

Why does my touch slider conflict with page scrolling on mobile?▼

React's synthetic onTouchMove may be registered as passive, so preventDefault has no effect and the page scrolls while dragging. Attach a non-passive touchmove listener directly via addEventListener with { passive: false } inside a useEffect.

When should I not use a draggable before/after slider?▼

Avoid it for static side-by-side image layouts, carousels, slideshows, lightbox galleries, or video comparisons. It is designed specifically for two same-angle images compared with a single draggable divider.

Related Skills

Explore More Software Engineering Skills→
ByeongminLeeByeongminLee
2

image-optimizer

Convert jpg, jpeg, png, gif, bmp, and tiff images to WebP using sharp.

Community
Intermediate
OpenClaudiaOpenClaudia
674

i18n

Implements next-intl internationalization with locale routing, hreflang sitemaps, and bulk translation for Next.js projects.

Official
Advanced
tomtoto757tomtoto757
3

responsive-storefront

Implement mobile-first responsive storefront layouts with sticky buy bars and touch-optimized cart drawers.

Community
Intermediate
madmaxfarm105-huemadmaxfarm105-hue

image-work

Standardize image and gallery rendering with the shared Image component and Wix placeholder URLs.

Community
Intermediate