I have a simple dual slider as seen below.
The left slider can not push the right slider any more to the right as intended, but the right slider pushes the left slider to the left and I don’t know how to prevent this.
What am I missing?
// Elements for the sliders and display
const minSlider = document.getElementById("minL");
const maxSlider = document.getElementById("maxL");
const rangeDisplay = document.getElementById("rangeDisplay");
// Update the display and enforce slider constraints
function updateSliders() {
let minL = parseInt(minSlider.value);
let maxL = parseInt(maxSlider.value);
// Prevent the minSlider from exceeding maxSlider's value
if (minL > maxL) {
minSlider.value = maxL;
minL = maxL;
}
// Update the displayed range
rangeDisplay.textContent = `${minL} - ${maxL}`;
}
// Attach input event listeners for live updating
minSlider.addEventListener("input", updateSliders);
maxSlider.addEventListener("input", updateSliders);
// Initial display update
updateSliders();
.slider-container {
position: relative;
width: 100%;
max-width: 400px;
height: 20px;
}
#minL, #maxL {
position: absolute;
width: 100%;
pointer-events: none;
}
#minL::-webkit-slider-thumb, #maxL::-webkit-slider-thumb {
pointer-events: auto;
height: 18px;
width: 18px;
background-color: #333;
cursor: pointer;
}
<div id="controls">
<label>Range: <span id="rangeDisplay">0 - 70</span></label>
<div class="slider-container">
<input type="range" id="minL" min="0" max="360" value="0" step="1">
<input type="range" id="maxL" min="0" max="360" value="70" step="1">
</div>
</div>
</body>
</html>