Delivery status: Ready Now
Public JS, CSS, and demo assets are published for this widget: /widgets/before-after-slider.js, /widgets/before-after-slider.css, and /widgets/demos/before-after-slider.html.
What Is the Before / After Slider Widget?
A before/after slider lets visitors drag a handle across a photo to reveal the "before" remodel state on one side and the "after" on the other. It's the single most effective visual for selling remodeling work, because it makes your transformation undeniable in two seconds.
Key Benefits
- Drag-to-reveal works on touch (mobile) and mouse (desktop)
- Auto-aligns photos even when shot at slightly different angles
- Optional auto-play demo so the slider self-demonstrates on first view
- Multiple sliders per page — build a full project gallery
- Image CDN + WebP serving for fast loads
How Contractors Use It
- Kitchen, bath, and ADU remodel galleries
- Service pages: each service gets one transformation slider
- Hero section: a single high-impact slider above the fold drives 30%+ more form submissions
Delivery Assets
- Demo page: /widgets/demos/before-after-slider.html
- Widget script:
/widgets/before-after-slider.js - Widget stylesheet:
/widgets/before-after-slider.css - Included in managed TradeCalcs setup plans and available for buyer-owned installs after setup review.
The Before / After Slider Widget is part of the TradeCalcs product catalog. The current instant-install package is 29 ready tools: 23 calculators + 6 widgets; product-spec pages stay visible for SEO and roadmap clarity without pretending unfinished widgets are ready to buy.