构建时间滑块，不确定从何处开始

Question

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

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

基本上我想在积分内部使用100点积分，因此第1点将从0％开始，而点100将以100％结束。

我可以弄清楚如何获得5的每个倍数的点数来改变高度。

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

在下一步中，我需要根据它下方的滑块更改一个特殊点的颜色（所以如果将滑块拖动到70％宽度，我需要定位节点70并使其颜色变化）

非常感谢任何帮助。

Answer 1

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

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