本来用input [type="range"]来做视频进度条，进度条下面有标识来做进度条跳转。
跳转的基本逻辑就是点击标识，视频跳到指定时间，然后进度条小球也跟着跳。
我天真的以为小球的位置是 (时间 / 总时间 * 进度条宽度)
做完了以后发现标识和input里面的小球并不是在一个位置上。
如下图
正文
如果你也想做一个进度条或者音量的控制器
那么可以看mdn 关于input [type="range"]的介绍，里面站着的，躺着的进度条都有例子。
- HTML: HyperText Markup Language | MDN (mozilla.org)
好了现在进入正题
现在先设置value的位置是totalLeft = percent * input width
但是小球的位置不代表input的value所在的位置，这个应该是我们大部分人都会搞错的东西。
观察上面这张图，发现小球的位置其实和value是有关系的
如果value在4的时候，那么小球的偏移位置是基于4的位置往后偏移offsetWidth = 4 / 10 * 小球的width
那么小球的位置是left = totalLeft - offsetWidth
但是
不对，看起来很像小球偏移了value的percent的大小
于是我在stackoverflow上搜索了一番
找到了这个公式
offset = (percent - 0.5) * 小球宽度
left = totalLeft - offset - 小球宽度一半
实际上公式后面的 - 小球一半宽度是我自己试验使出来的，原本的公式还是有偏移。
我也没搞清楚为什么这样，如果有小伙伴知道，欢迎评论区给我解释一下。
参考
css - Range input thumb gets offset over time - Stack Overflow
css - How to precisely find thumb position of input [type="range"]? - Stack Overflow
