如何在html5输入标签的滑块控件中添加比例尺

Question

有什么方法可以在滑块中包含刻度。我还没有找到执行此操作的属性。

Answer 1

要在滑块上打勾，您将必须使用名为list的属性，该属性应链接到HTML5的<datalist>标签

<input type=range min=0 max=100 value=50 step=20 list=tickmarks>
<datalist id=tickmarks>
<option>0</option>
<option>20</option>
<option>40</option>
<option>60</option>
<option>80</option>
<option>100</option>
</datalist>

Answer 2

首先，我应该感谢@Subbu的回答，这很有帮助，但我想有一些细节需要处理。

1. 您可以使用datalist，但它在Firefox中不起作用，尽管Chrome支持它，但是有一种解决方法，请参见下面的示例，其中涵盖了大多数浏览器：

input[type="range"]::-moz-range-track {
  padding: 0 10px;
  background: repeating-linear-gradient(to right, 
    #ccc, 
    #ccc 10%, 
    #000 10%, 
    #000 11%, 
    #ccc 11%, 
    #ccc 20%);
}

<input type="range" min="0" max="100" step="25" list="steplist">
<datalist id="steplist">
    <option>0</option>
    <option>25</option>
    <option>50</option>
    <option>75</option>
    <option>100</option>
</datalist>

查看this link了解更多详细信息。

2. 如果您也考虑使刻度线变色，则只需设置输入样式，如下面的示例（仅适用于Chrome）：

<input type="range" style="color:red" min="0" max="10" value="5" step="1" list="tickmarks"/>
<datalist id="tickmarks"><option>0</option><option>5</option><option>10</option></datalist>

但是您将无法根据MDN的显示来设置样式：

有些元素根本无法使用CSS设置样式。其中包括所有高级用户界面小部件，例如范围，颜色或日期控件，以及所有下拉小部件，包括，和元素。还众所周知，文件选择器小部件根本无法样式化。新的和元素也属于此类别。

3. [您可能需要垂直范围输入，在这种情况下，需要更改Firefox的棘手方法，只需更改渐变的值，这是一个简单的示例，它指定了Firefox在垂直方向上输入范围的中心点：

input[orient=vertical][type="range"]::-moz-range-track {
  background: repeating-linear-gradient(to bottom, 
    #ccc, 
    #ccc 50%, 
    #000 50%, 
    #000 51%, 
    #ccc 51%, 
    #ccc 60%);
}
input[type=range][orient=vertical] {
	writing-mode: bt-lr; /* IE */
	-webkit-appearance: slider-vertical; /* WebKit */
	width: 30px;
	height: 150px;
    }

<input type="range" orient="vertical" style="color:red; background:
#00f0;" min="0" max="10" value="3" step="1" list="tickmarks"/>
<datalist id="tickmarks"><option>5</option></datalist>