input range as timeline for a 12 hour day-CodePudding

So i'm trying to get this slider (inpute type range) to start ticking for each minute that passes as soon as I start the timer. I have not been able to find any clues about how to go about this. The Idea is that I start a timer and the slider crosses over to the other side in 12 hours

this is my slider

 <input type="range" id="timeline" name="timeline" min="0" max="720">

Also its probably not something normal but if I could pin the current time to the slider that would look great imo. If anyone knows how to do that let me know as wel

CodePudding user response：

Ok, you just need your slider to go one step every one minute.

You can use the setInterval() method to do that for you every one minute.

let slider = document.getElementById("timeline")

setInterval(
    function() {
        slider.value = Number( slider.value )   1
    },
    60 * 1000
)

 <input type="range" id="timeline" name="timeline" min="0" max="720">

And now your slider will go one step every one minute, you can set the increment value as you want, and decrement the time as you want.

The Number( slider.value ) is just to turn the slider value from string to number because javascript reads it as a string by default.

And we multiple 60 * 1000 because setInterval() takes time as milliseconds, so 1000 is a second and 60 * 1000 is a minute.

CodePudding user response：

Fun idea, this should follow the current locale time of the browser. Updates every half minute. This will slide back to the start when it crosses 12 hours, unsure if this was your idea or not, please comment if it isn't and I'll adjust my answer.

const slider = document.getElementById("timeline");

setInterval(updateSlider, 1000 * 30);

function updateSlider() {
  const now = new Date();
  const mod = now.getHours() % 12;
  slider.value = (60 * mod)   now.getMinutes();
}

updateSlider();

 <input type="range" id="timeline" name="timeline" min="0" max="720">