document.getElementById('slider').addEventListener('input', updateImagePositions);
document.getElementById('selector').addEventListener('input', resetImagePositions);

updateImagePositions();

function resetImagePositions() {
    const slider = document.getElementById('slider');
    const selector = document.getElementById('selector');
    slider.value = selector.value;
    updateImagePositions();
}

function updateImagePositions() {
    const slider = document.getElementById('slider');

    // Extract settings directly from HTML element attributes
    const sliderMax = parseInt(slider.max);
    const sliderMin = parseInt(slider.min);

    let sliderValue = parseInt(slider.value);
    console.log(sliderValue);

    // Convert the slider value to a percentage offset within the specified range
    let sliderMovePercent = ((sliderValue - sliderMin) / (sliderMax - sliderMin) * 2 - 1) * 100;

    document.getElementById('image2').style.transform = `translateX(${sliderMovePercent}%)`;
}