JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<span>Ida:</span>
<div id="ida-ranger"></div>
<div class="min-hora-ida-label">A partir de: </div>
<div class="max-hora-ida-label">Até: </div>
JavaScript
var json = {
"aPesquisa":[
{
"dsObservacao":null,
"trecho":[
{
"sqTrecho":1,
"voo":[
{
"dtPartida":"20170620 11:20",
"dtChegada":"20170620 16:40"
}
]
},
{
"sqTrecho":2,
"voo":[
{
"dtPartida":"20170627 04:10",
"dtChegada":"20170627 07:40"
},
{
"dtPartida":"20170627 14:15",
"dtChegada":"20170627 17:40"
}
]
}
]
},
{
"dsObservacao":null,
"trecho":[
{
"sqTrecho":1,
"voo":[
{
"dtPartida":"20170720 11:20",
"dtChegada":"20170720 16:40"
}
]
},
{
"sqTrecho":2,
"voo":[
{
"dtPartida":"20170727 04:10",
"dtChegada":"20170727 07:40"
},
{
"dtPartida":"20170727 14:15",
"dtChegada":"20170727 17:40"
}
]
}
]
}
]
};
$(".min-hora-ida-label").html('A partir de: 00h 00m');
$(".max-hora-ida-label").html('Até: 23h 59m');
$("#ida-ranger").slider({
range: true,
min: 0,
max: 1440, //1440 / 60 = 24
step: 15,
values: [0, 1439],
slide: function(e, ui) {
//Mínimo
var hoursMin = Math.floor(ui.values[0] / 60);
var minutesMin = ui.values[0] - (hoursMin * 60);
if (hoursMin.toString().length == 1) hoursMin = '0' + hoursMin;
if (minutesMin.toString().length == 1) minutesMin = '0' + minutesMin;
...