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的回答，这很有帮助，但我认为有一些细节需要处理。

您可以使用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了解更多详细信息。

如果您想给刻度线着色，只需设置以下示例的输入样式即可（仅限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设置样式。其中包括所有高级用户界面小部件，例如范围，颜色或日期控件，以及所有下拉小部件，包括，和元素。还众所周知，文件选择器小部件根本无法样式化。新元素和元素也属于此类。

您可能需要垂直范围输入，在这种情况下，需要更改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>

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

2 个答案: