How to make a slider hour range with jquery?

Asked

Viewed 228 times

1

How do 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>
<link href="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>

<div id="hora-range"></div>

<div class="min-hora-label"></div>
<div class="max-hora-label"></div>

javascript jquery

2 answers

4


Here’s an example, comments on 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>
<link href="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>

<div id="hora-range"></div>

<div class="min-hora-label"></div>
<div class="max-hora-label"></div>

2

If you want to take the initial time and the final time in minutes, 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>
<link href="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>

<div id="hora-range"></div>
<div class="min-hora-label"></div>
<div class="max-hora-label"></div>

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.