How to continuously increase the value of a range input (slider) until it reaches its maximum value in JavaScript?

Question

I have been working on a reference for timings along drawn lines (either straight or curved) where the user may preview the timings on a graph (like timing functions). I am trying to add a range input (slider) that can be used to control the timing value on the graph's x-axis, for which I have chosen 5 seconds as an example for the end point.

Here is a basic drawing of what I mean (with a straight line shown). This assumes that the x-axis ranges from 0 to 5 seconds, like the slider.

The idea is that once a 'play' button is clicked, the slider value will smoothly increase until it reaches the maximum value (100% of the 5 seconds). Then, once it has reached this maximum value, the button no longer increases the value (unless the user drags backwards and clicks this again).

I was hoping to bind this value using a time property in Vue for both the slider and an indicator on the graph, which could move with the slider along the line. However, I was unable to make other attempts work with stepUp() and setInterval() and clearInterval() . I am stuck on this one.

I was thinking maybe the .animate() method in jQuery could work if I used the same duration and added a step, but I was hoping to keep to vanilla JavaScript for now as the rest of my project is only based on this and Vue.js.

Please find the code I have written for this so far (I have broken it down to just the inputs and the Vue reference).

Slider and Play Button

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

Vue Reference

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

I have used 0 and 5 as the minimum and maximum values and worked out a duration based on these, although I do not know if it would work using 100 (as in 100%) instead for the latter and ignoring the 5 seconds.

Answer 1

Would this work for you? If you want a smoother transition you could just decrease the step size (eg .10 per 100 ms). The only thing left for you is to bind the position of the time indicator to the time prop.

 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>