如何创建可拖动、可缩放的时间轴，用户可以在其中拖动到网站上的特定日期？

如何解决如何创建可拖动、可缩放的时间轴，用户可以在其中拖动到网站上的特定日期？

我想实现类似于此处显示的时间表的内容： timeline1 timeline2

在时间线 1 中，用户可以拖动时间线并单击其中的日期以将其选中。

在时间线 2 中，用户拖动时间线本身，并根据显示的时间线中间选择日期。两个时间线都是可缩放的。

我已经搜索了很多具有此功能的 javascript 库，但到目前为止还没有找到任何东西。有谁知道这样的库，或者像示例中那样实现时间线的方法？

非常感谢您的帮助。

解决方法

一种方法是像这样自定义 <input type="range">：

html,body{
  margin:0;
}

input[type='range'] {
  overflow: hidden;
  width: 90%;
  -webkit-appearance: none;
  background-color: white;
  border:2px solid;
  height:40px;
  background-image:url(https://i.stack.imgur.com/IXatz.png); /* this is the background for the slider,replace with an image of the track */
}

input[type='range']::-webkit-slider-runnable-track {
  -webkit-appearance: none;
  color: white;
  margin-top: -1px;
}

input[type='range']::-webkit-slider-thumb {
  width: 44.5px;
  -webkit-appearance: none;
  height: 50px;
  cursor: ew-resize;
  background-image: url(https://i.stack.imgur.com/iOhn7.png); /* this is the image of the dragbar thumb */
}

<input type="range">

一种更好的方法是将它与井号和标签一起使用：

<input type="range" list="tickmarks">

<datalist id="tickmarks">
  <option value="0" label="0%"></option>
  <option value="10"></option>
  <option value="20"></option>
  <option value="30"></option>
  <option value="40"></option>
  <option value="50" label="50%"></option>
  <option value="60"></option>
  <option value="70"></option>
  <option value="80"></option>
  <option value="90"></option>
  <option value="100" label="100%"></option>
</datalist>

遗憾的是，对此功能的支持有限。具体（来自 MDN）：

目前，没有浏览器完全支持这些功能。例如，Firefox 根本不支持哈希标记和标签，而 Chrome 支持哈希标记但不支持标签。 Chrome 66 (66.0.3359.181) 版本支持标签，但 <datalist> 标签必须使用 CSS 设置样式，因为其 display 属性默认设置为 none，隐藏标签。