javascript - 构建时间 slider ，不知道从哪里开始

Question

所以我想创建一个类似于下图的时间显示。

我想动态创建它而不必使用图像，但我没有找到最好的方法。

基本上我想要 100 个点在 div 内响应，因此点 1 将从 0% 开始，点 100 将以 100% 结束。

我可以弄清楚如何让每个 5 的倍数处的点的高度发生变化。

现在我只是寻求一些关于从哪里开始寻找的指导。我想过使用 SVG，但我不太熟悉它，在花费数小时尝试解决该解决方案之前，我需要一些输入。

在下一步中，我需要根据其下方的 slider 更改特定点的颜色(因此，如果将 slider 拖动到 70% 宽度，我需要定位节点 70 并更改其颜色)

任何帮助将不胜感激。

Answer 1

您可以查看 jQuery UI slider ( https://jqueryui.com/slider/#steps ) 以开始使用。您可能想要使用捕捉增量的示例，然后您可以从那里添加 css 样式以使 slider 看起来像您想要的那样。

  <script>
  $( function() {
    $( "#slider" ).slider({
      value:100,
      min: 1,
      max: 100,
      step: 5,
      slide: function( event, ui ) {
        $( "#amount" ).val( "$" + ui.value );
      }
    });
    $( "#amount" ).val( "$" + $( "#slider" ).slider( "value" ) );
  } );
  </script>