JQuery UI Slider for time

jquery, jquery-plugins, jquery-ui, slider, uislider

Solution

Do not use hours as a unit, use minutes instead. Then apply a `slide` event that converts the minutes to hours:

$(function() {
    $(".slider-range").slider({
        range: true,
        min: 0,
        max: 1440,
        step: 15,
        slide: function(e, ui) {
            var hours = Math.floor(ui.value / 60);
            var minutes = ui.value - (hours * 60);

            if(hours.toString().length == 1) hours = '0' + hours;
            if(minutes.toString().length == 1) minutes = '0' + minutes;

            $('#something').html(hours+':'+minutes);
        }
    });
});

Problem

Hi I need to implement a slider for 24 hour time range . I like to use jquery ui slider for this . I have written below code ``` <script type="text/javascript"> $(function() { $(".slider-range").slider({ range: true, min: 0, max: 23.59, step: 0.15 }); }); </script> ``` I like the range is like 01:00----01:59 How i gave the colon(:) instead of dot(.) . Also the range waas gone beyond 59 like 05:85 . Please help me to create a time slider

Original source