使用 HTML 范围滑块显示“刻度线”答案

【问题标题】：Showing 'tick marks' with HTML range sliders使用 HTML 范围滑块显示“刻度线”
【发布时间】：2015-10-16 17:22:58
【问题描述】：

我正在尝试使用 HTML 范围滑块显示“刻度”。像这样：

虽然 HTML range 指令允许带有“step”和“datalist”的刻度，但 Safari 不支持它，而 Chrome 支持。我正在构建一个 ionic/Angular 应用程序，因此这意味着它不适用于 iOS 设备。

有一些第 3 方滑块，例如 angular-awesome-slider，它们确实支持一种刻度形式，但它们还有其他问题，使它们无法满足我的需要。

所以我的要求是：给定一个 HTML 范围滑块，我该如何在顶部添加一个显示“|”的叠加层在滑块顶部的特定位置标记？（注意“|”的定位需要考虑到滑块的显示宽度）

我在这里设置了一个codepen：

http://codepen.io/pliablepixels/pen/EjdpVB?editors=101

（SO坚持如果我插入codepen链接，我也需要插入代码，所以这里是输入的代码）

<input type=range ng-model="myRange" min=0 max=20 step = 1 list="vals">

    <datalist id="vals">
      <option>2</option>
      <option>6</option>
      <option>8</option>
   </data-list>

带有输入范围。如您所见，它在 Chrome 上显示刻度，但在 Safari 上没有。有人可以帮助我开始实现我的目标吗？

【问题讨论】：

标签： angularjs html ionic-framework

【解决方案1】：

这太晚了 :-) 但是你确定（我没有安装 Safari 来检查）如果你的 <datalist id="vals"> 标签匹配你的 </data-list> 标签不会有帮助吗？

坦率地说，我很惊讶它适用于 Chrome！虽然如果您将开始标签更改为<data-list>

，它肯定会中断

【讨论】：