test

.slider-container {
position: relative;
width: 80%;
max-width: 800px;
overflow: hidden;
}
.slider-container img {
width: 100%;
display: block;
}
.before-after {
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 100%;
overflow: hidden;
}
.slider {
position: absolute;
top: 0;
left: 50%;
width: 5px;
height: 100%;
background: white;
cursor: ew-resize;
}

const beforeAfter = document.querySelector(‘.before-after’);
const slider = document.querySelector(‘.slider’);
const container = document.querySelector(‘.slider-container’);

let isDragging = false;

slider.addEventListener(‘mousedown’, () => isDragging = true);
document.addEventListener(‘mouseup’, () => isDragging = false);
document.addEventListener(‘mousemove’, (e) => {
if (!isDragging) return;
let rect = container.getBoundingClientRect();
let offsetX = e.clientX – rect.left;
if (offsetX rect.width) offsetX = rect.width;
let percentage = (offsetX / rect.width) * 100;
beforeAfter.style.width = percentage + ‘%’;
slider.style.left = percentage + ‘%’;
});