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

问题描述 投票:4回答:2

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

html5
2个回答
6
投票

要在滑块上打勾,您将必须使用名为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>

0
投票

首先,我应该感谢@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了解更多详细信息。

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

  1. [您可能需要垂直范围输入,在这种情况下,需要更改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>
热门问题
推荐问题
最新问题