Before After Before After
Public API — instance.setValue(n) 50

Before After Before After
Before After Before After
Both instances share one 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