<div id="comparison-container">
    <div id="before" class="map"></div>
    <div id="after" class="map"></div>
</div>

body { margin: 0; padding: 0; }
.map { position: absolute; top: 0; bottom: 0; width: 100%; }
.mapboxgl-compare .compare-swiper-vertical {
    background-color:#ff0000;
    background-image: url('https://1.bp.blogspot.com/-fhOM-e9SwOQ/XhwqDV3hpAI/AAAAAAABW7A/sxPBbCComYULEunH3GJ3dPSvMu3zGTRqACNcBGAsYHQ/s1600/pan_bour_bu-ru.png');
    background-size: 60px;
}

mapboxgl.accessToken =
  "pk.eyJ1Ijoib3R0eWxhYiIsImEiOiJjbTNsYmhxdWwwaWJtMnFxenIzNmJuaGJmIn0.QEnCKZZKJQBAbK8GFBzAcw";
const beforeMap = new mapboxgl.Map({
  container: "before",
  style: "mapbox://styles/mapbox/light-v11",
  center: [0, 0],
  zoom: 0
});

const afterMap = new mapboxgl.Map({
  container: "after",
  style: "mapbox://styles/mapbox/dark-v11",
  center: [0, 0],
  zoom: 0
});


const container = "#comparison-container";
const compare = new mapboxgl.Compare(beforeMap, afterMap, container);

compare.setSlider(200);

compare.on('slideend', (e) => {
  alert(e.currentPosition);
});