npm

var before = new mapboxgl.Map({
  container: 'before', // Container ID
  style: 'mapbox://styles/mapbox/light-v9'
});
 
var after = new mapboxgl.Map({
  container: 'after', // Container ID
  style: 'mapbox://styles/mapbox/dark-v9'
});
 
new mapboxgl.Compare(before, after, {
  mousemove: true // Optional. Set to true to enable swiping during cursor movement.
});

compare = new mapboxgl.Compare(before, after, {
  mousemove: true // Optional. Set to true to enable swiping during cursor movement.
});
 
//Get Current position - this will return the slider's current position, in pixels
compare.currentPosition;
 
//Set Position - this will set the slider at the specified (x) number of pixels from the left-edge of viewport
compare.setSlider(x);
 
//Listen to slider movement - and return current position on each slideend
compare.on('slideend', (e) => {
  console.log(e.currentPosition);
});