带有中间点标记的范围输入(滑块)

2022-01-24 00:00:00 slider html css

我想要一个使用 HTML5 的滑块，如下所示:我可以在哪里显示值.我试过下面的代码:

I want a slider using HTML5 like this: where I can display the value. I have tried the below code:

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

但似乎没有任何效果.有什么想法吗?

But nothing seems to work. Any Idea?

推荐答案

你可以通过使用下面的代码来实现你想要的.我们在这里做的是:

You can sort of achieve what you want by using the below code. What we are doing here is:

  • 使用线性梯度(重复)以所需的间隔生成线条
  • 使用伪元素添加文本，然后使用 word-spacing 属性在它们之间提供所需的空间.对于 Chrome(Webkit 浏览器)容器不是必需的，示例中的注释代码就足够了，但 Firefox 需要容器.我认为 FF 中的行为是正确的，因为通常不希望 input 元素支持伪元素，因此最好保留容器以防未来
  • Use a linear-gradient (repeating) to generate the lines at the required intervals
  • Add the text using a pseudo-element and then give the required space in between them using the word-spacing property. For Chrome (Webkit browsers) the container is not required and the commented code in the sample is alone enough but Firefox requires to container. I think behavior in FF is the correct one because input elements generally aren't expected to support pseudo-elements and hence it is better to retain the container to be future-proof

注意事项:

  • 此示例在 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 的使用应该不是问题.
  • This sample is tested on Chrome (44.0.2376.0 dev-m, 42.0.2311.90 m), Firefox (36.0.4), Internet Explorer 11 and Opera 28.
  • I assume that the usage of repeating-linear-gradient or linear-gradient should not be an issue.

浏览器支持:

  • 适用于范围输入 - 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>

Codepen 演示

相关文章