Paste either snippet into your page — a Custom HTML block on WordPress, Shopify, or Squarespace works too. Both snippets update live as you customize, so what you copy is exactly what you configured.
<!-- Free Before After Slider widget by haynes lab — https://hayneslab.dev/tools/widgets/before-after-slider -->
<script data-hl-before="https://placehold.co/720x420/9ca3af/ffffff?text=Before" data-hl-after="https://placehold.co/720x420/f97316/ffffff?text=After">
/*!
* haynes lab — Before After Slider widget (free)
* Docs & embed code: https://hayneslab.dev/tools/widgets/before-after-slider
*/
(function () {
'use strict';
var PREFIX = 'hlw-before-after-slider';
var STYLE_ID = 'hlw-before-after-slider-styles';
function findScript() {
return document.currentScript ||
document.querySelector('script[src*="widgets/before-after-slider.js"]');
}
function injectStyles() {
if (document.getElementById(STYLE_ID)) return;
var css =
'.' + PREFIX + ', .' + PREFIX + ' * { box-sizing: border-box; }' +
'.' + PREFIX + ' { position: relative; max-width: 720px; margin: 0 auto;' +
' font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;' +
' font-size: 16px; line-height: 1.5; color: #1f2937; }' +
'.' + PREFIX + '__frame { position: relative; overflow: hidden; border-radius: 12px;' +
' border: 1px solid #e5e7eb; background: #f3f4f6; user-select: none; touch-action: none; }' +
'.' + PREFIX + '__img { position: absolute; inset: 0; width: 100%; height: 100%;' +
' object-fit: cover; display: block; pointer-events: none; }' +
'.' + PREFIX + '__after-clip { position: absolute; inset: 0; overflow: hidden; }' +
'.' + PREFIX + '__handle { position: absolute; top: 0; bottom: 0; width: 44px; margin-left: -22px;' +
' padding: 0; border: 0; background: transparent; cursor: ew-resize;' +
' display: flex; align-items: center; justify-content: center; }' +
'.' + PREFIX + '__handle::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%;' +
' width: 2px; margin-left: -1px; background: #ffffff; box-shadow: 0 0 4px rgba(0,0,0,0.4); }' +
'.' + PREFIX + '__knob { position: relative; z-index: 1; width: 36px; height: 36px; border-radius: 50%;' +
' background: #ffffff; box-shadow: 0 1px 4px rgba(0,0,0,0.35); display: flex; align-items: center;' +
' justify-content: center; font-size: 14px; color: #374151; letter-spacing: 2px; }' +
'.' + PREFIX + '__handle:focus-visible { outline: none; }' +
'.' + PREFIX + '__handle:focus-visible .' + PREFIX + '__knob { outline: 2px solid var(--hlw-accent); outline-offset: 2px; }' +
'.' + PREFIX + '__label { position: absolute; top: 10px; padding: 3px 10px; border-radius: 999px;' +
' font-size: 12px; font-weight: 600; color: #ffffff; background: rgba(17,24,39,0.65); pointer-events: none; }' +
'.' + PREFIX + '__label--before { left: 10px; }' +
'.' + PREFIX + '__label--after { right: 10px; }' +
'.' + PREFIX + '__credit { position: absolute; right: 10px; bottom: 6px; font-size: 11px;' +
' display: inline-flex; align-items: center; gap: 4px; color: rgba(255,255,255,0.85);' +
' text-decoration: none; text-shadow: 0 1px 2px rgba(0,0,0,0.5); }' +
'.' + PREFIX + '__credit svg { display: block; }' +
'.' + PREFIX + '__credit:hover { color: #ffffff; text-decoration: underline; }';
var style = document.createElement('style');
style.id = STYLE_ID;
style.textContent = css;
document.head.appendChild(style);
}
function el(tag, className, text) {
var node = document.createElement(tag);
if (className) node.className = className;
if (text != null) node.textContent = text;
return node;
}
function logoSvg() {
var svgNS = 'http://www.w3.org/2000/svg';
var svg = document.createElementNS(svgNS, 'svg');
svg.setAttribute('viewBox', '0 0 32 32');
svg.setAttribute('width', '13');
svg.setAttribute('height', '13');
svg.setAttribute('aria-hidden', 'true');
svg.setAttribute('focusable', 'false');
function circle(cx, cy, r, attrs) {
var c = document.createElementNS(svgNS, 'circle');
c.setAttribute('cx', cx);
c.setAttribute('cy', cy);
c.setAttribute('r', r);
for (var key in attrs) c.setAttribute(key, attrs[key]);
svg.appendChild(c);
}
circle(16, 16, 16, { fill: '#0f0a0a' });
circle(16, 16, 12, { fill: 'none', stroke: '#fff5f5', 'stroke-width': 1, opacity: 0.3 });
circle(16, 16, 9, { fill: 'none', stroke: '#fff5f5', 'stroke-width': 1, opacity: 0.5 });
circle(16, 16, 6, { fill: 'none', stroke: '#fff5f5', 'stroke-width': 1.2, opacity: 0.9 });
circle(16, 16, 3, { fill: '#06b6d4' });
circle(24.5, 7.5, 2, { fill: '#f97316' });
circle(7, 16, 1.8, { fill: '#f97316' });
circle(20, 20, 1.5, { fill: '#f97316' });
return svg;
}
function build(script) {
var beforeSrc = script.getAttribute('data-hl-before');
var afterSrc = script.getAttribute('data-hl-after');
if (!beforeSrc || !afterSrc) {
console.warn('[haynes lab before-after-slider] Both data-hl-before and data-hl-after image URLs are required. Nothing rendered.');
return;
}
var beforeLabel = script.getAttribute('data-hl-before-label') || 'Before';
var afterLabel = script.getAttribute('data-hl-after-label') || 'After';
var height = parseInt(script.getAttribute('data-hl-height'), 10);
if (isNaN(height) || height < 120) height = 420;
injectStyles();
var position = 50; // percent of "before" image visible
var root = el('div', PREFIX);
var frame = el('div', PREFIX + '__frame');
frame.style.height = height + 'px';
root.appendChild(frame);
var beforeImg = el('img', PREFIX + '__img');
beforeImg.src = beforeSrc;
beforeImg.alt = beforeLabel;
beforeImg.draggable = false;
frame.appendChild(beforeImg);
var afterClip = el('div', PREFIX + '__after-clip');
var afterImg = el('img', PREFIX + '__img');
afterImg.src = afterSrc;
afterImg.alt = afterLabel;
afterImg.draggable = false;
afterClip.appendChild(afterImg);
frame.appendChild(afterClip);
frame.appendChild(el('span', PREFIX + '__label ' + PREFIX + '__label--before', beforeLabel));
frame.appendChild(el('span', PREFIX + '__label ' + PREFIX + '__label--after', afterLabel));
var handle = el('button', PREFIX + '__handle');
handle.type = 'button';
handle.setAttribute('role', 'slider');
handle.setAttribute('aria-label', 'Comparison slider');
handle.setAttribute('aria-valuemin', '0');
handle.setAttribute('aria-valuemax', '100');
handle.setAttribute('aria-valuetext', beforeLabel + ' / ' + afterLabel + ' comparison position');
var knob = el('span', PREFIX + '__knob', '‹ ›');
knob.setAttribute('aria-hidden', 'true');
handle.appendChild(knob);
frame.appendChild(handle);
function render() {
afterClip.style.clipPath = 'inset(0 0 0 ' + position + '%)';
handle.style.left = position + '%';
handle.setAttribute('aria-valuenow', String(Math.round(position)));
}
function setFromClientX(clientX) {
var rect = frame.getBoundingClientRect();
if (!rect.width) return;
position = Math.min(100, Math.max(0, ((clientX - rect.left) / rect.width) * 100));
render();
}
var dragging = false;
frame.addEventListener('pointerdown', function (e) {
dragging = true;
setFromClientX(e.clientX);
if (frame.setPointerCapture) {
try { frame.setPointerCapture(e.pointerId); } catch (err) { /* noop */ }
}
handle.focus();
e.preventDefault();
});
frame.addEventListener('pointermove', function (e) {
if (dragging) setFromClientX(e.clientX);
});
frame.addEventListener('pointerup', function () { dragging = false; });
frame.addEventListener('pointercancel', function () { dragging = false; });
handle.addEventListener('keydown', function (e) {
var step = e.shiftKey ? 10 : 2;
if (e.key === 'ArrowLeft' || e.key === 'ArrowDown') {
position = Math.max(0, position - step);
} else if (e.key === 'ArrowRight' || e.key === 'ArrowUp') {
position = Math.min(100, position + step);
} else if (e.key === 'Home') {
position = 0;
} else if (e.key === 'End') {
position = 100;
} else {
return;
}
e.preventDefault();
render();
});
render();
var credit = el('a', PREFIX + '__credit');
credit.appendChild(logoSvg());
credit.appendChild(document.createTextNode('Powered by haynes lab'));
credit.href = 'https://hayneslab.dev/tools/widgets/before-after-slider';
credit.target = '_blank';
credit.rel = 'noopener';
frame.appendChild(credit);
if (script.parentNode && script.parentNode.nodeName !== 'HEAD') {
script.insertAdjacentElement('afterend', root);
} else {
document.body.appendChild(root);
}
}
function init() {
var script = findScript();
if (!script) {
console.warn('[haynes lab before-after-slider] Could not locate its own script tag. Nothing rendered.');
return;
}
build(script);
}
if (document.body) {
init();
} else {
document.addEventListener('DOMContentLoaded', init);
}
})();
</script>