28 lines
996 B
JavaScript
28 lines
996 B
JavaScript
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}%)`;
|
|
}
|