How to make a slider range of time with jquery?

Navigation
1

How do I make a slider range of hours from 00:00 to 23:59 with jquery ui?

Code: 

$("#hora-range").slider({
  range: true,
  min: 0000,
  max: 2359,
  values: [0000, 2359],
  slide: function(event, ui) {
    $(".min-hora-label").html('HORA MIN= ' + ui.values[0]);
    $(".max-hora-label").html('HORA MAX= ' + ui.values[1]);
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><linkhref="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script><divid="hora-range"></div>

<div class="min-hora-label"></div>
<div class="max-hora-label"></div>
    
asked by anonymous 30.05.2017 / 19:04

2 answers

4

Here is an example, comments in the code: 

$("#hora-range").slider({
        range: true,
        min: 0,
        max: 1440,//1440 / 60 = 24
        step: 15,
        slide: function(e, ui) {
            //Mínimo
            //calcula as horas, exemplo: 125 / 60 = 2,083, arredonda para 2
            var hoursMin = Math.floor(ui.values[0] / 60); 
            //calcula os minutos, exemplo: 125 - 2 * 60 = 5
            //No final terá horas = 2 e minutos = 5
            var minutesMin = ui.values[0] - (hoursMin * 60);//restante são os minutos
            //acrescenta o zero a esquerda se houver apenas 1 digito, 1 = 01, 2 = 02 e etc...
            if(hoursMin.toString().length == 1) hoursMin = '0' + hoursMin;
            if(minutesMin.toString().length == 1) minutesMin = '0' + minutesMin;
            $(".min-hora-label").html('HORA MIN= ' + hoursMin + ':' +minutesMin);
            //Máximo
            var hoursMax = Math.floor(ui.values[1] / 60);
            var minutesMax = ui.values[1] - (hoursMax * 60);
            if(hoursMax.toString().length == 1) hoursMax = '0' + hoursMax;
            if(minutesMax.toString().length == 1) minutesMax = '0' + minutesMax;
            $(".max-hora-label").html('HORA MAX= ' + hoursMax + ':' +minutesMax);
        }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><linkhref="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script><divid="hora-range"></div>

<div class="min-hora-label"></div>
<div class="max-hora-label"></div>
    
30.05.2017 / 19:19
2

If you want to get the start time and the end time in a minute, do not use the conversion, it would be the following code: 

$(function() {
    $("#hora-range").slider({
        range: true,
        min: 0,
        max: 1440,
        step: 15,
        slide: function(e, ui) {
            $(".min-hora-label").html('HORA MIN= ' + ui.values[0]);
            $(".max-hora-label").html('HORA MAX= ' + ui.values[1]);
        }
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><linkhref="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script><divid="hora-range"></div>
<div class="min-hora-label"></div>
<div class="max-hora-label"></div>
    
30.05.2017 / 19:33
NFe issue by Android application Doubts about the realloc function