HTML 范围滑块,每 5 个标签

2023-12-02

我有一个简单的 HTML 范围滑块。最小值为 0 最大值为 30。 我想在滑块下方放置标签,但只能每 5 个。

代码如下所示,演示页面在这里 -https://premiecheck-omzetgarant.nl/CalcTool/test.html

<div class="slidecontainer">
  <input type="range" min="0" max="30" value="0" class="slider" id="myRange">
  <p>Value: <span id="demo"></span></p>
</div>

您可以使用datalist

datalist {
  display: flex;
  justify-content: space-between;
  color: red;
  width: 50%;
}

input {
  width: 50%;
}
<input type="range" list="tickmarks">

<datalist id="tickmarks">
  <option value="0" label="0"></option>
  <option value="10"></option>
  <option value="20"></option>
  <option value="30"></option>
  <option value="40"></option>
  <option value="50" label="5"></option>
  <option value="60"></option>
  <option value="70"></option>
  <option value="80"></option>
  <option value="90"></option>
  <option value="100" label="10"></option>
</datalist>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

HTML 范围滑块,每 5 个标签 的相关文章

随机推荐