CODEWITHSUNDEEP
jqueryjquery-ui
pufAmuf
pufAmuf

Reputation: 7805

Slider UI: Start at 20:00 end at 07:00?

I'm trying to select venue closing time using a Slider. From tutorials, I've been able to put together a simple slider, however what I want to do is create a range from 20:00 to 07:00, meaning that once it passes the 23:59 mark it goes back to 00:00.

This is what I have so far.

$( "#open-till" ).slider({
range: "min",
value: 1230,
min: 0,
max: 1439,
step: 30,
slide: slideTime
});


function slideTime(event, ui){
    var val0 = $("#open-till").slider( "value" ),
        minutes0 = parseInt(val0 % 60, 10),
        hours0 = parseInt(val0 / 60 % 24, 10),
    startTime = getTime(hours0, minutes0);
    $("#time").text(startTime);
}
function getTime(hours, minutes) {
    minutes = minutes + "";
    return hours + ":" + minutes;
}
slideTime();

See my fiddle here

Thanks everyone!

Upvotes: 1

Views: 123

Answers (1)

XCS
XCS

Reputation: 28137

Display hours with modulo %24

Also change min and max values of the slider. To get the actual time from the slider (if you want to send it to a server) it would be value%1440 as I consider 7:00 to be 1890 in minutes (24 +7)

http://jsfiddle.net/TRABs/8/

Upvotes: 2

Related Questions