如何将一个字段限制为 2 个数字范围？

Question

我有一个数字字段，接受 0.25 到 5 之间的数字

我希望它也可以选择在 15 ~ 300 之间...这样用户可以输入：

0.25 ~ 5 或 15 ~ 300

<input class="form-control square" min="0.25" max="5" step="0.01" type="number" name="hashtag">

这是当前元素

Answer 1

您将需要一个交互式元素，例如

button

，以允许用户在两个给定范围之间切换，然后使用 JavaScript 控制输入。

类似这样的：

HTML

<input id="range-input" class="form-control square" min="0.25" max="5" step="0.01" type="number" name="hashtag">
<button id="toggle-range">Range</button>
<p id="info-text">Current range: 0.25 - 5</p>

JavaScript

const input = document.querySelector("#range-input");
const button = document.querySelector("#toggle-range");
const info = document.querySelector("#info-text");

button.addEventListener("click", (event) => {
  event.preventDefault();
  let min = "0.25", max = "5";
  if (input.min === min) {
    min = "15", max = "300";    
  }
  input.min = min, input.max = max;
  info.innerText = `Current range: ${min} - ${max}`
});