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.slice(9, 14).split(':').map(Number);
    return horas[0] * 60 + horas[1];
}

function filtrar(json, min, max) {
    return json.aPesquisa.map(obj => {
        return obj.trecho.filter(trecho => {
            var partida = horasParaMinutos(trecho.voo[0].dtPartida);
            var chegada = horasParaMinutos(trecho.voo[0].dtChegada);
            return partida >= min && chegada <= max;
        });
    });
}

function mostrarTrechos(min, max) {
    var filtrados = filtrar(json, 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"
                }]
            }, {
                "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": [{

    ...