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

Question

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.

Answer 1

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">