如何连续增加范围输入（滑块）的值，直到它达到JavaScript中的最大值？

我一直在为沿直线或曲线绘制的计时参考，用户可以在类似于图形的计时函数上预览计时。我正在尝试添加一个范围输入滑块，可用于控制图形x轴上的计时值，为此，我选择了5秒作为终点的示例

这是我的意思的基本图，图中显示了一条直线。这假设x轴的范围为0到5秒，就像滑块一样

这个想法是，一旦点击“播放”按钮，滑块值将平稳增加，直到达到5秒钟内100%的最大值。然后，一旦达到该最大值，该按钮将不再增加该值，除非用户向后拖动并再次单击该按钮

我希望在Vue中为滑块和图形上的指示器使用时间属性来绑定该值，该指示器可以随滑块沿直线移动。但是，我无法使用Stepp、setInterval和clearInterval进行其他尝试。我被困在这个问题上了

我在想，如果我使用相同的持续时间并添加了一个步骤，jQuery中的.animate方法可能会起作用，但我希望现在继续使用香草JavaScript，因为我的项目的其余部分仅基于此和Vue.js

请查找我为此编写的代码，到目前为止，我已将其分解为输入和Vue引用

滑块和播放按钮

---

我使用了0和5作为最小值和最大值，并根据它们计算出了持续时间，尽管我不知道是否可以使用100作为100%来代替后者，并忽略5秒。

这对您有效吗？如果您想要更平滑的过渡，您可以减小步长，例如每100毫秒减小10步。您唯一需要做的就是将时间指示器的位置绑定到时间道具

新Vue{ el:应用程序， 数据：{ 时间:0,， 分:0,， 最高：5， }, 方法：{ 玩{ const interval=setInterval=>{ 这个时间谢谢你的建议！不幸的是，这是我以前遇到的问题；如果我试图使增加看起来更平滑，即将步长设置为0.10/100ms，则再次单击“播放”按钮后，滑块将不再到达终点。我认为这可能是由于数值超过了最大值？我又试了一次，在随后的比赛中，滑块似乎只在中间折断，不能再往前走了。你知道解决这个问题的方法吗？我遇到了同样的问题。显然，这与浮点是二进制有关。我会尝试增加最大值，例如x100，减少间隔，例如10ms，然后将时间除以与增加最大值/100相同的值。虽然有点黑客，也许其他人有更好的解决方案。顺便说一句，你可能想看看哪种方法更“vue”呢

<div id="app">
    <input v-model="time" type="range" min="0" max="5" step="any">
    <button v-on:click="play">Play</button>
</div>

let app = new Vue({
    el: '#app',
    data: {
        time: 0,
    },
    methods: {
        play() {
            let vm = this;
            let duration = (5 - vm.time) * 1000;
        },
    }
});