html - 带有中间点标记的范围输入( slider )

Question

我想要一个像这样使用 HTML5 的 slider : 我可以在哪里显示值(value)。我试过下面的代码:

<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 元素通常不支持伪元素，因此最好保留容器以面向 future

注意事项:

• 此示例在 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。

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

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

Demo on Codepen