Before/After Slider Widget Demo

Demo 1: Kitchen Remodel Transformation

Show your clients the dramatic difference in kitchen remodels.

Before

After

<div data-tradecalcs-before-after>
  <img data-before-image src="before.jpg" alt="Kitchen before remodel">
  <img data-after-image src="after.jpg" alt="Kitchen after remodel">
  <div data-before-label>Before</div>
  <div data-after-label>After</div>
</div>

Interaction: Drag the slider handle left/right, or use arrow keys when focused.

Demo 2: Bathroom Renovation

Demonstrate bathroom transformation with before/after comparison.

Before

After

Demo 3: Home Exterior Makeover

Show exterior transformations with siding, paint, or landscaping.

Before

After

Demo 4: Custom Theme (Green Brand)

Customized colors using CSS variables to match your brand.

Before

After

<div data-tradecalcs-before-after
     style="--tc-ba-slider-color: #10b981;
            --tc-ba-slider-hover: #059669;
            --tc-ba-handle-border: #10b981;">
  <!-- images -->
</div>

Configuration Options

Data Attributes

• data-tradecalcs-before-after (required) — Main container
• data-before-image (required) — Before image (must be <img>)
• data-after-image (required) — After image (must be <img>)
• data-before-label (optional) — Label for before image
• data-after-label (optional) — Label for after image

CSS Custom Properties

• --tc-ba-slider-color — Slider line color (default: #667eea)
• --tc-ba-slider-hover — Slider hover color (default: #5568d3)
• --tc-ba-handle-bg — Handle background (default: white)
• --tc-ba-handle-border — Handle border color (default: #667eea)
• --tc-ba-label-bg — Label background (default: rgba(0,0,0,0.7))
• --tc-ba-label-text — Label text color (default: white)
• --tc-ba-slider-width — Slider line width (default: 4px)
• --tc-ba-handle-size — Handle circle size (default: 48px)

JavaScript API

// Initialize all sliders manually
TradeCalcsBeforeAfter.init();

// Initialize specific slider
const element = document.querySelector('[data-tradecalcs-before-after]');
TradeCalcsBeforeAfter.initElement(element);

// Cleanup slider (remove event listeners)
TradeCalcsBeforeAfter.cleanup(element);
TradeCalcsBeforeAfter.cleanup('slider-id');

// Check if user prefers reduced motion
if (TradeCalcsBeforeAfter.prefersReducedMotion()) {
  console.log('User prefers reduced motion');
}

// Listen for initialization
element.addEventListener('tc-before-after-initialized', function(e) {
  console.log('Slider initialized', e.detail);
});

Keyboard Controls

The slider is fully keyboard accessible:

• Tab — Focus on slider handle
• Arrow Left / Arrow Right — Move slider left/right by 5%
• Home — Move slider to 0% (show only after image)
• End — Move slider to 100% (show only before image)

Features

• ✅ Pure vanilla JavaScript — no dependencies
• ✅ Lightweight — ~5KB total (JS + CSS)
• ✅ Auto-initialization — works immediately after loading
• ✅ Mobile responsive — touch-friendly on mobile devices
• ✅ Accessible — ARIA labels and keyboard navigation
• ✅ Keyboard navigation — arrow keys, Home, End
• ✅ Dark mode support — respects prefers-color-scheme
• ✅ Reduced motion support — respects prefers-reduced-motion
• ✅ Customizable — CSS variables for easy theming
• ✅ Multiple instances — unlimited sliders per page
• ✅ Cleanup API — remove event listeners when needed
• ✅ Self-hosted — own it forever, no recurring fees

Use Cases

• Kitchen Remodels — Show before/after of cabinets, countertops, appliances
• Bathroom Renovations — Demonstrate tile, vanity, shower transformations
• Home Exteriors — Display siding, paint, landscaping makeovers
• Flooring Projects — Compare old vs new flooring installations
• Deck & Patio — Show outdoor space transformations
• ADU/Home Additions — Before/after of construction projects
• Roofing — New roof vs old roof comparison
• Interior Paint — Room color transformations

Best Practices

• Same perspective — Take before/after photos from the same angle and distance
• Similar lighting — Match lighting conditions for fair comparison
• Same aspect ratio — Use images with matching width/height ratios
• Optimize images — Compress images to 800-1200px width for web
• Descriptive alt text — Add clear alt text for accessibility
• File size — Keep each image under 300KB for fast loading
• Format — Use JPEG for photos, WebP for better compression

Browser Support

Works in all modern browsers:

• ✅ Chrome/Edge (Chromium) — Full support
• ✅ Safari — Full support
• ✅ Firefox — Full support
• ✅ Mobile Safari (iOS) — Full support with touch
• ✅ Chrome Mobile (Android) — Full support with touch