Help with jQuery UI slide ranger

Question

I have a slider ranger jQuery ui it works normal but the problem is that when I’m on mobile(by mobile) I can’t drag the slide so it works have to click on top.

$(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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>

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

The code is also on Jsfiddle.

I Googled and found the jQuery Touch Punch that promised to solve the problem but I couldn’t. Does anyone know what might be happening?