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({
    animate: true,
    step: 1,
    min: 0,
    max: 1440, // 1440 são a quantidade de minutos num dia
    values: [0],
    slide: function(event, ui) {
        var val = ui.values[0];
		console.log(val)
        mostrarTrechos(json, val);
        legenda.innerHTML = [Math.floor(val / 60), val % 60].map(h => h < 10 ? '0' + h : h).join(':');
    }
});

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

function mostrarTrechos(json, duracao) {
    var filtrados = json.aPesquisa.map(obj => {
        return obj.trecho.map(trecho => {
            return trecho.voo.filter(voo => {
                return horasParaMinutos(voo.hrDuracao) <= duracao
            });
        });
    });
    $('pre').text(JSON.stringify(filtrados, null, 2));
}

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,
                "voo": [{
                    "dtPartida": "20170720 11:20",
                    "dtChegada": "20170720 16:40",
                    "hrDuracao": "00:30"
                }]
            }, {
                "sqTrecho": 2,
                "voo": [{

              ...