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

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