范围输入（滑块），带有中间点标记

Question

我想要一个使用HTML5的滑块： 我可以在哪里显示价值。我试过以下代码：

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

但似乎没有任何效果。有什么想法吗？

Answer 1

您可以使用以下代码实现您想要的目标。我们在这里做的是：

• 使用线性渐变（重复）以所需的间隔生成线
• 使用伪元素添加文本，然后使用word-spacing属性在它们之间提供所需的空间。对于Chrome（Webkit浏览器），不需要容器，样本中的注释代码足够单独，但Firefox需要容器。我认为FF中的行为是正确的，因为input元素通常不会支持伪元素，因此最好保留容器以便面向未来

注意事项：

• 此示例在Chrome（44.0.2376.0 dev-m，42.0.2311.90 m），Firefox（36.0.4），Internet Explorer 11和Opera 28上进行了测试。
• 我认为repeating-linear-gradient或linear-gradient的使用不应成为问题。

浏览器支持：

• 适用于范围输入 - Chrome 5 +，Firefox 23 +，IE 10 +，Safari 3.1 +，Opera 9+
• 重复渐变 - Chrome 10+（-webkit前缀），Firefox 3.6+（-moz前缀），IE 10 +，Safari 5.1，Opera 11.6。

＆＃13;

＆＃13;

input[type='range'] {
  box-sizing: border-box;
  border: 0px solid transparent;
  padding: 0px;
  margin: 0px;
  width: 210px;
  height: 50px;
  cursor: pointer;
  background: -webkit-repeating-linear-gradient(90deg, #777, #777 1px, transparent 1px, transparent 40px) no-repeat 50% 50%;
  background: -moz-repeating-linear-gradient(90deg, #777, #777 1px, transparent 1px, transparent 40px) no-repeat 50% 50%;
  background: repeating-linear-gradient(90deg, #777, #777 1px, transparent 1px, transparent 40px) no-repeat 50% 50%;
  background-size: 122px 25px;
  font-size: 16px;
}
input[type='range'],
input[type='range']::-webkit-slider-runnable-track,
input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
}
input[type='range']::-webkit-slider-runnable-track {
  box-sizing: border-box;
  width: 200px;
  height: 5px;
  border-radius: 2px;
  background: #777;
}
input[type='range']::-moz-range-track {
  box-sizing: border-box;
  width: 200px;
  height: 5px;
  border-radius: 2px;
  padding: 0px;
  background: #777;
}
input[type='range']::-moz-range-thumb {
  box-sizing: border-box;
  padding: 0px;
  height: 20px;
  width: 10px;
  border-radius: 2px;
  border: 1px solid;
  background: #EEE;
}
input[type='range']::-ms-track {
  box-sizing: border-box;
  width: 210px;
  height: 5px;
  border-radius: 2px;
  padding: 0px;
  background: #777;
  color: #777;
}
input[type='range']::-webkit-slider-thumb {
  box-sizing: border-box;
  padding: 0px;
  height: 20px;
  width: 10px;
  border-radius: 2px;
  border: 1px solid;
  margin-top: -8px;
  background: #EEE;
}
input[type='range']::-ms-thumb {
  box-sizing: border-box;
  padding: 0px;
  height: 20px;
  width: 10px;
  border-radius: 2px;
  border: 1px solid;
  background: #EEE;
}
input[type="range"]::-ms-fill-lower {
  background: transparent;
}
input[type='range']:focus {
  outline: none;
}
/*input[type='range']:after{
  position: absolute;
  content: '20 40 60 80';
  padding: 25px 4035px;
  word-spacing: 20px;
  left: 0px;
  top: 0px;
}*/

.container:after {
  position: absolute;
  color: #777;
  content: '20 40 60 80';
  padding: 40px;
  word-spacing: 20px;
  left: 0px;
  top: 0px;
  z-index: -1;
}
.container {
  padding: 0px;
  position: relative;
}

/* Just for demo */

output{
  display: block;
  margin-top: 20px;
  color: #777;
}
output:before{
  content:"Selected Value: ";
  font-weight: bold;
}
body {
  font-family: Calibri, Arial;
}

＆＃13;

<div class="container">
  <input type="range" min="0" max="100" value="50" step="1" list="tickmarks" id="rangeInput" oninput="output.value = rangeInput.value">
  <datalist id="tickmarks">
    <option value="0 to 20">0</option>
    <option>20</option>
    <option>40</option>
    <option>60</option>
    <option>80</option>
    <option>100</option>
  </datalist>
  <output id="output" for="rangeInput">50</output> <!-- Just to display selected value -->
</div>

＆＃13;

＆＃13;

＆＃13;

Demo on Codepen