Playing with jQuery UI sliders

HTML

<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<div id="sliderHolder">
    <div id="slider"></div>
    <div id="legenda"></div>
</div>
<pre></pre>

CSS

* {
    padding: 0;
    margin: 0;
}

#legenda {
    margin-top: 20px;
}

#sliderHolder {
    padding: 100px 20px 20px 20px;
}

.ui-slider {
    position: relative;
    height: 6px;
    background: #ddf;
    cursor: pointer;
    border-radius: 3px;
}

.ui-slider-range {
    position: absolute;
    height: 6px;
    background: #aaf;
    top: 0;
    font-size: 0;
}

.ui-slider-handle {
    position: absolute;
    height: 30px;
    top: -12px;
    width: 20px;
    margin-left: -10px;
    outline: none;
    background: #aab;
    border-radius: 5px;
}

.ui-slider-handle:hover,
.ui-slider-handle:active {
    background: #889;
}

.ui-disabled .ui-slider-range {
    background: grey;
}

.ui-disabled .ui-slider-handle {
    background: lightgrey;
}

.ui-disabled,
.ui-disabled .ui-slider-handle {
    cursor: default;
}

JavaScript

var legenda = document.getElementById('legenda');
$("#slider").slider({
    range: true,
    animate: true,
    step: 1,
    min: 0,
    max: 1440, // 1440 são a quantidade de minutos num dia
    values: [0, 1440],
    slide: function(event, ui) {
        mostrarTrechos.apply(null, ui.values);
        legenda.innerHTML = ui.values.map(val => [Math.floor(val / 60), val % 60].map(h => h < 10 ? '0' + h : h).join(':')).join(' > ')
    }
});

function horasParaMinutos(str) {
    var horas = str.split(':').map(Number);
    return horas[0] * 60 + horas[1];
}








var filtrar =  function (horamin, horamax)
{
  var data = JSON.parse(JSON.stringify(json.aPesquisa));
  let result = data.filter(item => {
    let voos = item.trecho[1].voo.filter(voo => {
      var time = horasParaMinutos(voo.hrDuracao);
      console.log(horamin);
      return time >= horamin && time <= horamax;
    });
    item.trecho[1].voo = voos;
    return voos.length > 0;
  });
  return result;
};

























function mostrarTrechos(min, max) {
    var filtrados = filtrar(min || 0, max || 1440);
    $('pre').text(JSON.stringify(filtrados, null, 4));
}

const json = {
    "aPesquisa": [{
            "dsObservacao": null,
            "trecho": [{
                "sqTrecho": 1,
                "voo": [{
                    "dtPartida": "20170620 11:20",
                    "dtChegada": "20170620 16:40",
                    "hrDuracao": "01:20"
                }]
            }, {
                "sqTrecho": 2,
                "voo": [{

                    "dtPartida": "20170627 04:10",
                    "dtChegada": "20170627 07:40",
                    "hrDuracao": "03:20"
                }, {
                    "dtPartida": "20170627 14:15",
                    "dtChegada": "20170627 17:40",
                    "hrDuracao": "05:45"
                }]
            }]
        },

        {
            "dsObservacao": null,
            "trecho": [{
                "sqTrecho": 1,
          ...