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 acplish the task at hand.

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

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 acplish the task at hand.

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

• javascript
• html
• web
• addeventlistener
• mousewheel

• could you share some codes? – Alizadeh118 Commented May 22, 2021 at 16:36

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