CODEWITHSUNDEEP
javascriptjqueryhtml
J. Doe
J. Doe

Reputation: 15

Change jQuery UI time slider intervals to hour, and add ticks

I was looking for a simple jQuery time slider to integrate with my google maps v3 webmap, and I found this codes that are working perfectly:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style>
        .ui-slider-range {
            background: rgb(255, 130, 37);
        }
    </style>


    <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
    <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    <script>
        $(function () {
            function pad(num, size) {
                var s = num + "";
                while (s.length < size) s = "0" + s;
                return s;
            }
            var formatSecs = function (totalsecs) {
                var hour = parseInt(totalsecs / 3600, 10) % 24;
                var min = parseInt(totalsecs / 60, 10) % 60;
                var secs = totalsecs % 60;

                return pad(hour, 2) + ":" + pad(min, 2) + ":" + pad(secs, 2);
            };

            $("#slider-range").slider({
                range: true,
                min: 0,
                max: 86400,
                values: [7200, 72000],
                slide: function (event, ui) {
                    var min = ui.values[0];
                    var max = ui.values[1];

                    $("#amount").val(formatSecs(min) + " - " + formatSecs(max));
                }
            });

            $("#amount").val(formatSecs($("#slider-range").slider("values", 0)) + " - " + formatSecs($("#slider-range").slider("values", 1)));

        });
    </script>


</head>

<body>
    <p>
        <label for="amount">Time range:</label>
        <input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
    </p>

    <div id="slider-range"></div>
</body>

</body>
</html>

But the only problem is that it the toggle moves in the interval of seconds. I just want it to move by hours instead, so it is not as smooth, or if the transition can't be changed, I want to add ticks to the bottom like in the example shown by user "pliablepixels" in this link so at least the user can gauge where is next hour they can pull the slider to.

Upvotes: 0

Views: 1513

Answers (1)

Ahs N
Ahs N

Reputation: 8366

You can use step property of the slider like so:

$("#slider-range").slider({
    range: true,
    min: 0,
    max: 86400,
    values: [7200, 72000],
    step: 3600,
    slide: function (event, ui) {
        var min = ui.values[0];
        var max = ui.values[1];

        $("#amount").val(formatSecs(min) + " - " + formatSecs(max));
    }
});

Notice the step: 3600,, this will increment the time by steps of 1 hour.

3600 (number of secs in an hour) has been used since your whole range is in terms of seconds as well.

Here is the JSFiddle demo

You can also add the following code to smooth out the movement when changing range:

$(".ui-slider-range, .ui-slider-handle").css("transition", "all 0.4s");

Here is the updated code

Upvotes: 3

Related Questions