document.getElementById('upperSlider').addEventListener('input', updateImagePositions);
document.getElementById('lowerSlider').addEventListener('input', updateImagePositions);
updateImagePositions();
function updateImagePositions() {
    const upperSlider = document.getElementById('upperSlider');
    const lowerSlider = document.getElementById('lowerSlider');

    // Extract settings directly from HTML element attributes
    const maxOffset = 50;  // Set the maximum movement range in percentage
    const upperMax = parseInt(upperSlider.max);
    const upperMin = parseInt(upperSlider.min);
    const lowerMax = parseInt(lowerSlider.max);
    const lowerMin = parseInt(lowerSlider.min);

    let upperValue = parseInt(upperSlider.value);
    let lowerValue = parseInt(lowerSlider.value);

    // Convert the slider value to a percentage offset within the specified range
    let upperMovePercent = ((upperValue - upperMin) / (upperMax - upperMin) * 2 - 1) * maxOffset;
    let lowerMovePercent = ((lowerValue - lowerMin) / (lowerMax - lowerMin) * 2 - 1) * maxOffset;

    // Apply transformation based on the upper slider for image1
    document.getElementById('image1').style.transform = `translateX(${upperMovePercent}%)`;

    // Calculate cumulative transformation for image2
    let totalMovePercent = upperMovePercent + lowerMovePercent;
    document.getElementById('image2').style.transform = `translateX(${totalMovePercent}%)`;
}