I have a range slider that you can move up with the right arrow key on a keyboard or grab and move. The step over 36 is 3 and the step under 36 is 1. This works perfectly on their own. However, if you were to move the slider manually and then use the keydown event, the step is being applied twice to the slider. How can I get the step to always just apply once?
var rangeSlider = document.getElementById('range-slider');
document.addEventListener('keydown', function(e) {
console.log(rangeSlider.value, '1');
// Update the step size based on the current value of the range slider
if (rangeSlider.value >= 36) {
var step = 3;
} else {
var step = 1;
}
// Set the step size of the range slider to the calculated value
rangeSlider.setAttribute("step", step);
if (e.keyCode == 39) { //right
// Increment the value of the range slider by the step size
rangeSlider.value = parseInt(rangeSlider.value) + parseInt(step);
console.log(rangeSlider.value, '2');
}
});<input type='range' min='0' max='84' value='0' id='range-slider' class='slider' />>Solution :
You forgot to cancel the original movement with e.preventDefault()
var rangeSlider = document.getElementById('range-slider');
document.addEventListener('keydown', function(e) {
console.log(rangeSlider.value ,'1');
// Update the step size based on the current value of the range slider
if (rangeSlider.value >= 36) {
var step = 3;
} else {
var step = 1;
}
// Set the step size of the range slider to the calculated value
rangeSlider.setAttribute("step", step);
if (e.keyCode == 39) { //right
// Increment the value of the range slider by the step size
e.preventDefault();
rangeSlider.value = parseInt(rangeSlider.value) + parseInt(step);
console.log(rangeSlider.value ,'2');
}
});<input type='range' min='0' max='84' value='0' id='range-slider' class='slider'/>