How do I change the value of a range input by user scroll?

user_14056647 0
Viewed 629

I want to change the value of an input type range via mouse scroll.

If the user scrolls up, the value of the range increases, and if the user scrolls down, the value decreases.

I found the wheel event, but I'm not sure how I can use it to accomplish the task at hand.

By the way, I have 100vh on the body so I cant manipulate with scroll bar.

web addeventlistener mousewheel html javascript
1 Answers

Detect the wheel event and check the deltaY.

var slider = document.getElementById("range");
slider.addEventListener("wheel", function(e){
  if (e.deltaY < 0){
    slider.valueAsNumber += 1;
  }else{
    slider.value -= 1;
  }
  e.preventDefault();
  e.stopPropagation();
})
body{
  margin:0;
  width:100%;
}
input{
  width:100%;
  margin:0;
}
Hover over the input and scroll up/down

<input type="range" min="1" max="100" value="50" id="range">

user_142512210
Related