如何更改用户滚动输入的范围值？

Question

我想通过鼠标滚动更改输入类型范围的值。

如果用户向上滚动，范围值增加，如果用户向下滚动，范围值减小。

我找到了 wheel 事件，但我不确定如何使用它来完成手头的任务。

顺便说一句，我身上有100vh所以我不能用滚动条操作。

Answer 1

检测到wheel事件并检查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">

如何更改用户滚动输入的范围值？

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

html

javascript

mousewheel

addeventlistener

web