CODEWITHSUNDEEP
javascriptjqueryhtml
Rolando
Rolando

Reputation: 62644

How to make a "playback" slider with tickmarks html5?

I would like to do something like this in HTML5 where I have something like: enter image description here

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?

Upvotes: 2

Views: 795

Answers (1)

Stecman
Stecman

Reputation: 3060

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/

Upvotes: 1

Related Questions