如何为Bootstrap范围滑块添加值超过2时的警告弹窗？

首先修正HTML中的滑块范围配置，将min="0"改为min="1"，确保取值范围为1至5：

<input type="range" class="form-range" name="depth" id="depth_area" value="1" min="1" max="5">
<p>Value: <span id="value"></span></p>

接下来修改JavaScript代码，在滑块输入事件中加入阈值判断逻辑，当值超过2时弹出警告：

var slider = document.getElementById("depth_area");
var output = document.getElementById("value");
output.innerHTML = slider.value;

slider.oninput = function () {
  output.innerHTML = this.value;
  // 判断当前值是否超过2
  if (parseInt(this.value) > 2) {
    alert("该值过高");
  }
};

可选优化：使用Bootstrap风格警告框 #

如果不想用原生弹窗，想要更贴合Bootstrap风格的提示，可以添加一个隐藏的警告组件并控制其显示：

1. 在HTML中添加警告框：

<div class="alert alert-warning alert-dismissible fade show d-none" id="warning-alert" role="alert">
  该值过高
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

2. 调整JavaScript逻辑：

var slider = document.getElementById("depth_area");
var output = document.getElementById("value");
var warningAlert = document.getElementById("warning-alert");
output.innerHTML = slider.value;

slider.oninput = function () {
  output.innerHTML = this.value;
  var currentValue = parseInt(this.value);
  // 根据值切换警告框显示状态
  if (currentValue > 2) {
    warningAlert.classList.remove("d-none");
  } else {
    warningAlert.classList.add("d-none");
  }
};

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