如何限制HTML range滑块无法滑动到50以下的指定区间？

解决方法 #

你原有代码存在两处问题导致限制失效：

1. 变量名拼写错误：limitng_value 少写了字母i，正确拼写是limiting_value，导致阈值判断逻辑直接报错失效
2. 仅return false无法阻止滑块值更新，需要主动将低于阈值的取值强制重置为阈值，才能真正限制滑动范围

修正后可用代码

$(document).on("input change", "#range", function() {
  const limiting_value = 50;
  const scrolled_value = Number($(this).val());
  if (scrolled_value < limiting_value) {
    // 小于阈值时强制设为阈值
    $(this).val(limiting_value);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="range" type="range" name="range" min="0" value="100" max="100" />

更简单的原生优化方案

如果不需要后续放开0-50的区间限制，直接修改滑块的原生min属性即可，浏览器原生会自动限制滑动范围，不需要额外写事件判断：

$("#range").attr('min', 50);

内容的提问来源于stack exchange，提问作者arjun sreekumar