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

【问题标题】：How do I change the value of a range input by user scroll?如何更改用户滚动输入的范围值？
【发布时间】：2023-04-08 18:07:01
【问题描述】：

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

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

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

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

【问题讨论】：

你能分享一些代码吗？
对不起，我忘了批准你的评论，非常感谢
@Nick 很高兴为您提供帮助:)

标签： javascript html web addeventlistener mousewheel

【解决方案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">

【讨论】：