Question

I would like to do something like this in HTML5 where I have something like:

I want to be able to make it so that when I click on the Start button, the tickmark gradually moves to the next tick and increments by 1 per second, clicking on stop stops the behavior, and clicking on start again resumes from the current spot. The box at the top just shows the number of seconds corresponding to the red tracker bar. Assuming the user can specify the number of tickmarks (i.e. could be 20 seconds/tickmarks wide ro 10 seconds/tickmarks wide).

I have seen the JQuery UI Slider http://jqueryui.com/demos/slider/ though it has no tickmarks and am unsure if it really is the best way to go about doing what I described or if there is some better way.

What is the best javascript, jquery, html approach of doing this?

Answer 1

Try this – I felt like doing an exercise!

http://jsfiddle.net/zBKJk/

Only quirk is that the ticks along the bottom don’t align exactly with different values of TICKS_ON_BAR. Probably a minor CSS/math issue.

You can change these variables

var TICKS_ON_BAR = 10; // Number of seconds to show on the bar
var TICK_RATE_MS = 100; // Interval to tick at (in milliseconds)

Also added a handy callback function

function timerComplete(){
    // Do something further when the timer hits the end of the bar
}

​
Edit: If you want this to run smoothly, you could make the interval lower or (since you specified HTML5) use a linear CSS3 transition to make the changes animate:

http://jsfiddle.net/zBKJk/1/ (a bit glitchy, I just dumped in the example css from w3schools)

Animating this as is with jQuery is glitchy also: http://jsfiddle.net/zBKJk/2/