A lightweight, dependency-free web component for creating before/after image comparison sliders.
Created as part of Texas A&M University's Sesquicentennial Celebration and heavily inspired by twentytwenty and Knight Labs's JuxtaposeJS
- 🚀 Zero dependencies
- 📦 ~3KB minified
- 📱 Touch and mouse support
- ♿ Accessible
- 🎨 Customizable labels
- 🌐 Works everywhere (Web Components)
- 🔄 Horizontal and vertical orientations
<script src="https://unpkg.com/@markpbaggett/before-after"></script><script src="https://cdn.jsdelivr.net/npm/@markpbaggett/before-after"></script>npm install @markpbaggett/before-afterYou can load this as a pure web component but make sure you give it a height or it won't appear at all.
<!DOCTYPE html>
<html>
<head>
<title>Before/After Demo</title>
</head>
<body>
<before-after
before="before.jpg"
after="after.jpg"
before-label="Label that Goes with Before"
after-label="Label that Goes with After"
start-position="50"
style="height: 600px;">
</before-after>
<script src="https://unpkg.com/@markpbaggett/before-after"></script>
</body>
</html>
Use custom properties for easy theming like:
before-after {
display: block;
height: 600px;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}| Attribute | Type | Default | Description |
|---|---|---|---|
before |
string | required | URL of the before image |
after |
string | required | URL of the after image |
before-label |
string | "Before" | Label for the before image |
after-label |
string | "After" | Label for the after image |
start-position |
number | 50 | Initial slider position (0–100) |
show-labels |
boolean | true | Show or hide labels |
orientation |
string | "horizontal" | Slider orientation: "horizontal" or "vertical" |
link-url |
string | optional | Webpage to link brading to |
link-text |
string | optional | Text to list in branding |
favicon-url |
string | optional | A link to a tiny image to use before text |