javascript - 带有 'tick marks' 的输入 slider

Question

我希望通过创建此输入 slider 来指明正确的方向。我做了一些研究，我相信合适的方法是使用 html range 输入类型。

我的问题是什么是处理具有“刻度标记”并且不允许用户在这些选项之间着陆的最佳方法？

html range input 是否有限制 slider 位置/选项的属性？

我假设这不能仅通过输入类型/属性来完成，我需要使用 JS/Jquery。

我在 UI 中使用 Angular 和 Bootstrap。请查看模型图片。

谢谢

Answer 1

您可以为此使用 steps 属性。剩下的只是造型。

function outputUpdate(num) {
document.querySelector('#output').value = num;
}

form {
  margin-top: 25px;
  text-align: center;
  
}

input {
  width: 80%;
  display: block;
  margin: 0 auto;
}

output {
  display: block;
  margin: 25px auto;
  font-size:2em;
}

<form>
  <input type="range" id="value" value="25" step="25" min="0" max="100" oninput="outputUpdate(value)">
  <output for=value id="output">25</output>
</form>