输入滑块带'刻度'

Question

我希望通过创建此输入滑块指向正确的方向。我做了一些研究，我相信适当的路线是使用html 范围输入类型。

我的问题是如何采用刻度线＆＃39;并且不允许用户登陆 这些选项？

html范围输入是否有限制滑块位置/选项的属性？

我假设这不能完全用输入类型/ attibutes完成，我需要使用JS / Jquery。

我正在使用Angular和Bootstrap作为UI。请参见图片进行模拟。

谢谢

Answer 1

您可以使用steps属性。其余的只是造型。

＆＃13;

＆＃13;

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

＆＃13;

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

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

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

设置间隔有几个好的引导滑块。

here上有几种不同风格的滑块，选择最适合您项目的滑块。

您可以在github上找到更多内容here

两者都有关于如何实施的文档，以及示例。