Before-After Image Comparison Slider: Lightweight Web Component

Before-After Image Comparison Slider is a lightweight web component that creates a responsive slider for comparing two overlapping images.

This component helps you display visual changes compactly. Instead of placing two images side-by-side and forcing the user to scroll, you can layer them in the same space. The user then controls a slider to reveal one image over the other, making the comparison direct and interactive

Features:

Sponsored
• Zero dependencies—pure vanilla JavaScript with no external requirements
• Compact footprint at roughly 3KB minified, keeping your bundle lean
• Native touch and mouse support, including proper gesture handling
• Full keyboard accessibility with arrow key and Home/End navigation
• Customizable label text for both before and after image states
• Web Component architecture that works across all modern browsers without polyfills
• Flexible positioning control through the start-position attribute
• CSS custom properties for theme customization
• Responsive design that adapts to container dimensions

How to use it:

1. Install & import Before-After Image Comparison Slider via NPM:

npm install @markpbaggett/before-after

2. Or load the main script from a CDN.

<script src="https://unpkg.com/@markpbaggett/before-after"></script>

3. Add the <before-after  /> component to the webpage, define the before and after image URLs, and set a fixed height (the width adapts to its container). The start-position attribute controls where the slider begins.

<before-after 
  before="before.jpg"
  after="after.jpg"
  style="height: 400px;"
>

4. Use the start-position attribute to control where the slider begins. Defaults to 50 percent.

<before-after 
  before="before.jpg"
  after="after.jpg"
  style="height: 400px;"
  start-position="30"
>

5. Customize the text labels displayed on the before/after image sections.

<before-after 
  before="before.jpg"
  after="after.jpg"
  style="height: 400px;"
  start-position="30"
  before-label="Before"
  after-label="After"
>

6. You can style the component using standard CSS. Since it’s a web component with a shadow DOM, external styles don’t cascade into the component by default, but you can still customize the appearance:

before-after {
  display: block;
  height: 500px; /* Required for visibility */  width: 80%;
  margin: 2rem auto;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

Alternatives:

• JuxtaposeJS: Created by Knight Lab, this is one of the most well-known libraries in this space. It’s a mature and reliable option, though it’s a bit heavier and comes with its own styling that might require overrides.
• TwentyTwenty: This was a very popular jQuery plugin for image comparison. If you’re still working on a project that relies on jQuery, it’s a viable choice. For modern projects, a dependency-free web component like Before-After is a better fit.

FAQs:

Q: What happens if my “before” and “after” images have different dimensions?
A: The component uses object-fit: contain for the images. This means both images will be scaled down to fit within the component’s dimensions while maintaining their aspect ratio. You won’t get any weird stretching, but you might see some empty space if the aspect ratios differ significantly.

Q: How can I customize the look of the slider handle and the dividing line?
A: Because the component uses a closed Shadow DOM, its internal elements aren’t directly targetable by your page’s CSS. The library does not expose CSS custom properties for theming these parts. You would have to fork the repository and modify the CSS string directly in the JavaScript file to make visual changes.

Q: Can I control the slider position programmatically?
A: Yes. The component exposes the BeforeAfter class on the window object. You can select the element and update its start-position attribute, and the component will re-render. For more complex interactions, you could also set the attribute directly: document.querySelector('before-after').setAttribute('start-position', '75').

Related Resources:

• 10 Best Image Comparison Tools In JavaScript

The post Before-After Image Comparison Slider: Lightweight Web Component appeared first on CSS Script.