如何禁用input range鼠标滚轮滚动功能并设置默认值

咱们一步步来搞定你遇到的两个问题：阻止滚轮改变range的值，以及确保默认初始值正确生效。

一、阻止滚轮修改Range值 #

你之前尝试CSS和jQuery没成功，其实最直接的方式是给range元素添加滚轮事件监听，阻止它的默认行为就行。因为你用了D3，咱们直接用D3的事件绑定来实现：

// 在设置完range的min、max、value之后，添加这个监听
range_year.on("wheel", function(event) {
  event.preventDefault(); // 彻底阻止滚轮改变range值的默认行为
});

这样不管鼠标是不是停在range输入框上滚动，都不会再触发值的变化了，完全只保留点击选择的操作方式。

二、确保默认初始值正确显示 #

看你的代码，其实已经用.attr("value", max)设置了初始值，但可能是因为没有同步更新页面上的chosen_year span，所以看起来没生效。咱们在设置完属性后，手动更新一下显示，或者触发change事件让你的slideyear函数执行：

range_year.attr("min", min)
  .attr("max", max)
  .attr("value", max)
  .on("wheel", function(event) {
    event.preventDefault();
  });

// 方式1：直接更新span显示初始年份
d3.select("#chosen_year").text(max);

// 方式2：触发change事件，让slideyear自动处理
// range_year.node().dispatchEvent(new Event('change'));

修改后的完整代码 #

把上面的修改整合到你的代码里，最终版本是这样的：

<input type="range" id="range_year_donut" min="" max="" value="" onchange="slideyear()"> 
<span id="chosen_year"></span>

<script>
var range_year = d3.select("#range_year_donut");

d3.csv("http://raw.githubusercontent.com/cvrnogueira/CODWorkData/master/database/final_data_set.csv").then(function(data){ 
  let max = d3.max(data, function(d) {return +d.year}); 
  let min = d3.min(data, function(d) {return +d.year}); 

  range_year.attr("min", min)
    .attr("max", max)
    .attr("value", max)
    .on("wheel", function(event) {
      event.preventDefault(); // 阻止滚轮修改值
    });

  // 初始化显示最大年份
  d3.select("#chosen_year").text(max);
}); 

function slideyear(){ 
  let year = range_year.node().value; 
  d3.select("#chosen_year").text(year); // 确保每次选择后更新显示
}
</script>

这样两个问题就都解决了：滚轮不会再误改range的值，默认初始值也会正确显示在页面上啦。

内容的提问来源于stack exchange，提问作者Catarina Nogueira