29 lines
1.4 KiB
JavaScript
29 lines
1.4 KiB
JavaScript
|
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}%)`;
|
||
|
|
}
|