Javascript 如何制作一个；播放“；带记号的滑块html5？

我想在HTML5中做一些类似的事情，其中我有：

我希望能够这样做，当我点击开始按钮时，记号会逐渐移动到下一个记号，并以每秒1的速度递增，点击停止停止行为，再次点击开始会从当前位置恢复。顶部的框仅显示与红色跟踪条对应的秒数。假设用户可以指定记号的数量（即20秒/记号宽或10秒/记号宽）

我见过jQueryUI滑块，但它没有标记，我不确定它是否真的是实现我所描述的目标的最佳方式，或者是否有更好的方式

---

最好的javascript、jquery和html方法是什么？

试试这个-我想做个练习

唯一的怪癖是底部的刻度线与条形图上的不同值不完全对齐。可能是CSS/数学方面的小问题

您可以更改这些变量

var TICKS_ON_BAR = 10; // Number of seconds to show on the bar
var TICK_RATE_MS = 100; // Interval to tick at (in milliseconds)

还添加了一个方便的回调函数

function timerComplete(){
    // Do something further when the timer hits the end of the bar
}

​ 编辑：如果希望平滑运行，可以降低间隔，或者（因为您指定了HTML5）使用线性CSS3转换使更改具有动画效果：

（有点油嘴滑舌，我刚刚在w3schools的示例css中转储了它）

用jQuery设置动画也很容易出错：