Html 带中间点标记的范围输入（滑块）

我想要一个使用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>

0
20
40
60
80
100

---

但似乎什么都不管用。有什么想法吗？

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

• 使用线性渐变（重复）以所需的间隔生成线
• 使用伪元素添加文本，然后使用

  字间距

  属性在它们之间提供所需的空间。对于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上进行测试
• 我假设

  重复线性渐变

  或

  线性渐变

  的使用不应成为问题

浏览器支持：

• 对于范围输入-Chrome 5+、Firefox 23+、IE 10+、Safari 3.1+、Opera 9+
• 用于重复渐变-Chrome10+（-webkit前缀）、Firefox3.6+（-moz前缀）、IE 10+、Safari5.1、Opera11.6

input[type='range']{
框大小：边框框；
边框：0px实心透明；
填充：0px；
边际：0px；
宽度：210px；
高度：50px；
光标：指针；
背景：-webkit重复线性梯度（90度，#777，#777 1px，透明1px，透明40px）不重复50%50%；
背景：-moz重复线性梯度（90度，#777，#777 1px，透明1px，透明40px）不重复50%50%；
背景：重复线性梯度（90度，#777，#777 1px，透明1px，透明40px）不重复50%50%；
背景尺寸：122px 25px；
字体大小：16px；
}
输入[type='range']，
输入[type='range']：：-webkit滑块可运行轨迹，
输入[type='range']：：-webkit滑块拇指{
-webkit外观：无；
}
输入[type='range']：：-webkit滑块可运行轨迹{
框大小：边框框；
宽度：200px；
高度：5px；
边界半径：2px；
背景：#777；
}
输入[type='range']：：-moz范围轨迹{
框大小：边框框；
宽度：200px；
高度：5px；
边界半径：2px；
填充：0px；
背景：#777；
}
输入[type='range']：：-moz range thumb{
框大小：边框框；
填充：0px；
高度：20px；
宽度：10px；
边界半径：2px；
边框：1px实心；
背景：#EEE；
}
输入[type='range']：：-ms轨道{
框大小：边框框；
宽度：210px；
高度：5px；
边界半径：2px；
填充：0px；
背景：#777；
颜色：#777；
}
输入[type='range']：：-webkit滑块拇指{
框大小：边框框；
填充：0px；
高度：20px；
宽度：10px；
边界半径：2px；
边框：1px实心；
利润上限：-8px；
背景：#EEE；
}
输入[type='range']：：-ms thumb{
框大小：边框框；
填充：0px；
高度：20px；
宽度：10px；
边界半径：2px；
边框：1px实心；
背景：#EEE；
}
输入[type=“range”]：-ms填充下限{
背景：透明；
}
输入[type='range']：焦点{
大纲：无；
}
/*输入[type='range']：在{
位置：绝对位置；
内容:"20 40 60 80";；
填充：25px 4035px；
字间距：20px；
左：0px；
顶部：0px；
}*/
.货柜：之后{
位置：绝对位置；
颜色：#777；
内容:"20 40 60 80";；
填充：40px；
字间距：20px；
左：0px；
顶部：0px；
z指数：-1；
}
.集装箱{
填充：0px；
位置：相对位置；
}
/*只是为了演示*/
输出{
显示：块；
边缘顶部：20px；
颜色：#777；
}
输出：之前{
内容：“选定值：”；
字体大小：粗体；
}
身体{
字体系列：Calibri，Arial；
}

0
20
40
60
80
100
50

没有比这更简单的方法了？没有，据我所知，没有其他更简单的方法了@JustinSmith@Harry我们能把间隔放在我们想要的地方吗？我正在使用youtube进度条的范围输入，希望标记不同的持续时间。关于如何实现这一点，有什么解决办法吗？请help@Harry虽然我已经投了赞成票，但我想补充一点，我认为你的答案很漂亮——这正是我所想/寻找的如果有人能够封装它，这将是一个很棒的JS组件。