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

Question

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

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

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

我希望使用 Vue 中的 time 属性为滑块和图表上的指示器绑定这个值，它可以随着滑块沿线移动。但是，我无法使用 stepUp() 和 setInterval() 和 clearInterval() 进行其他尝试。我被这个卡住了。

我在想，如果我使用相同的持续时间并添加一个步骤，那么 jQuery 中的 .animate() 方法可能会起作用，但我希望现在像其余的一样继续使用原生 JavaScript我的项目只基于this和Vue.js。

请找到到目前为止我为此编写的代码（我已将其分解为输入和 Vue 参考）。

滑块和播放按钮

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

Vue 参考

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

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

Answer 1

这对你有用吗？如果您想要更平滑的过渡，您可以减小步长（例如每 100 毫秒 0.10）。剩下的唯一事情就是将时间指示器的位置绑定到时间道具。

new Vue({
  el: "#app",
  data: {
    time: 0,
    min: 0,
    max: 5,
  },
  methods: {
    play() {
      const interval = setInterval(() => {
        this.time < this.max ?
          this.time++ : clearInterval(interval)
      }, 1000);
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  {{time}}
  
  <input v-model="time" type="range" :min="min" :max="max" step="1">

  <button type="button" @click="play()">Play</button>
</div>