LGBT-HP: Before/after slider: JS

2026-07-15T07:04:59Z

Before/after slider: JS

New page

/* Before/after image slider — powers {{Before after}} / see [[Help:Before-after slider]] */
( function () {
function initSliders( root ) {
var sliders = ( root || document ).querySelectorAll( '.ba-slider:not(.ba-ready)' );
Array.prototype.forEach.call( sliders, function ( slider ) {
var after = slider.querySelector( '.ba-after-wrap' );
if ( !after ) {
return;
}
slider.classList.add( 'ba-ready' );
var handle = document.createElement( 'span' );
handle.className = 'ba-handle';
slider.appendChild( handle );

function setPos( p ) {
p = Math.max( 0, Math.min( 100, p ) );
var inset = 'inset(0 0 0 ' + p + '%)';
after.style.webkitClipPath = inset;
after.style.clipPath = inset;
handle.style.left = p + '%';
}
function move( e ) {
var rect = slider.getBoundingClientRect();
var clientX = e.touches ? e.touches[ 0 ].clientX : e.clientX;
setPos( ( clientX - rect.left ) / rect.width * 100 );
}

var dragging = false;
slider.addEventListener( 'mousedown', function ( e ) { dragging = true; move( e ); e.preventDefault(); } );
document.addEventListener( 'mousemove', function ( e ) { if ( dragging ) { move( e ); } } );
document.addEventListener( 'mouseup', function () { dragging = false; } );
slider.addEventListener( 'touchstart', function ( e ) { dragging = true; move( e ); }, { passive: true } );
slider.addEventListener( 'touchmove', function ( e ) { if ( dragging ) { move( e ); } }, { passive: true } );
slider.addEventListener( 'touchend', function () { dragging = false; } );

setPos( 50 );
} );
}

if ( window.mw && mw.hook ) {
mw.hook( 'wikipage.content' ).add( function ( $c ) {
initSliders( $c && $c[ 0 ] ? $c[ 0 ] : document );
} );
} else if ( document.readyState !== 'loading' ) {
initSliders( document );
} else {
document.addEventListener( 'DOMContentLoaded', function () { initSliders( document ); } );
}
}() );

MediaWiki:Common.js - Revision history

LGBT-HP: Before/after slider: JS