CODEWITHSUNDEEP
jquery
Ecl1pse Armageddon
Ecl1pse Armageddon

Reputation: 391

How can I create a duration slider using seconds as raw value in jQuery?

Let's say I have an input that is a text field.

If I typed 3600 then the value would be 60 minutes. I'm tracking the value of duration based on seconds.

How could I dynamically display a slider that showed seconds if under 1 minute, and over 1 minute it would say 1 minute and x seconds, etc... and if over a hour it would go 1 hour and 30 minutes and 5 seconds, and so on. Limited to hours/minutes/seconds.

This slider is just a UI wrapper for seconds as the real value for the input.

Upvotes: 2

Views: 738

Answers (1)

Vini
Vini

Reputation: 8419

I would create a slider to show the increment whenever a value is entered in the text field and vice-versa and code the 'slidechange' hendler to do the conversion and display it.

// Create a slider with unit increments (for seconds)
$( "#slider" ).slider({
    min:0,
    max:18000, // Max 5 hours for this example
    step:1
});

I am not sure if this is exactly what you were looking for but have tried to make the code simple enough that you can modify it to suit your needs.

You can see the complete working example here jsFiddle link

Upvotes: 1

Related Questions