Making An Image Comparison Slider In WordPress With Oxygen

how to use basic Oxygen elements to create an interactive before/after image comparison slider element. In this tutorial, we'll cover how to use the Oxygen Code Block to add custom functionality using vanilla JavaScript and CSS

Before

After

Use This CSS your Oxy Code block

CSS

.comparison,
.comparison * {
	touch-action: none;
}

.comparison__image {
	user-select: none;
	object-fit: cover;
}

.comparison__image--after {
	clip-path: inset(0% 0% 0% 50%);
}

.comparison__icon {
	cursor: pointer;
	user-select: none;
}

Use This JavaScript your Oxy Code block

JavaScript

document.querySelectorAll('.comparison').forEach( comp => {
	
	if( window.angular ) return;
	
	comp.setAttribute( 'data-dragging', 'false' );
	
	comp.addEventListener( 'pointerdown', (e) => {
		
		e.preventDefault();
		comp.setAttribute( 'data-dragging', 'true' );
		
	})
	
	comp.addEventListener( 'pointerup', (e) => {

		e.preventDefault();
		comp.setAttribute( 'data-dragging', 'false' );

	})
	
	comp.addEventListener( 'pointermove', (e) => {
		
		if( comp.getAttribute( 'data-dragging' ) !== 'true' ) return;
		
		e.preventDefault();
		
		let imgAfter = comp.querySelector( '.comparison__image--after' );
		let imgRect = comp.getBoundingClientRect();
		let imgWidth = comp.offsetWidth;
		let imgMouseX = e.clientX - imgRect.left;
		let imgPercent = ( imgMouseX / imgWidth ) * 100;
		
		if( imgMouseX <= 0 || imgMouseX >= imgWidth ) return;
		
		imgAfter.style.clipPath = 'inset(0% 0% 0% ' + imgPercent + '%)';
		
		let imgIcon = comp.querySelector( '.comparison__icon' );
		
		imgIcon.style.transform = 'translateX(' + ( imgMouseX - ( imgWidth / 2) ) + 'px)';
		
	})
	
})

Make Parent Div and set position: relative;
Use This Class: ".comparison__image"

Use This Class: ".comparison__image--after"
position:absolute;

Use This Class: ".comparison__icon"
set postion center and use z-index max value keep top

Folder Structure: