使用jQuery实现range滑块最小值大于最大值时的高亮提示

原代码核心问题 #

• 选择器语法错误：$('$mindistance')写法有误，正确ID选择器应为$('#mindistance')，多余的$符号导致无法正常获取最小距离滑块元素
• 比较逻辑错误：错误比较值的字符串长度，val()返回的是字符串类型，需转为数值后直接比较数值大小
• 监听事件覆盖不全：仅监听最大距离滑块的失焦事件，修改最小距离滑块时不会触发校验，滑块拖动场景使用input事件可以实现实时响应

正确实现代码 #

jQuery 逻辑代码

// 同时监听两个滑块的input事件，拖动时实时校验
$('.rangeslider').on('input', function() {
  // 转数值后再比较大小
  const minDistance = Number($('#mindistance').val());
  const maxDistance = Number($('#maxdistance').val());
  if (minDistance > maxDistance) {
    $('.rangeslider').css('background-color', 'rgb(255,175,175)');
  } else {
    $('.rangeslider').css('background-color', '');
  }
});

可选兼容CSS（部分浏览器默认range滑块自定义背景不生效时添加）

.rangeslider {
  -webkit-appearance: none;
  appearance: none;
  height: 8px;
  border-radius: 4px;
  background: #e5e5e5;
  outline: none;
}
/* 滑块拖动按钮样式，可按需调整 */
.rangeslider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #2563eb;
  cursor: pointer;
}
.rangeslider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #2563eb;
  cursor: pointer;
  border: none;
}

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