带中间点标记的范围输入（滑块） [英] Range input (slider) with markings for intermediate points

问题描述

我想要一个使用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上测试。


• 我假设重复线性渐变或线性渐变的用法不应该是一个问题。

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


• 对于重复渐变 - ），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演示

这篇关于带中间点标记的范围输入（滑块）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！