Lightweight before / after image slider — no dependencies, CSS-driven
instance.setValue(n)
Compare — .setValue() syncs them
<!-- 1. Markup --> <div class="compare-slider"> <img class="compare-slider__image" src="before.jpg" alt="Before" /> <img class="compare-slider__image compare-slider__after" src="after.jpg" alt="After" /> </div> // 2. Styles + script <link rel="stylesheet" href="src/compare-slider.css" /> import CompareSlider from './src/CompareSlider.js'; // 3. Init const slider = new CompareSlider('.compare-slider'); // 4. Options const slider = new CompareSlider('.compare-slider', { defaultValue: 30, classes: { input: 'compare-slider__input', // range input class handle: 'compare-slider__handle', // injected drag button class }, }); // 5. Public API slider.setValue(75); // set position (0–100) slider.destroy(); // remove injected elements, restore state