jQM 1.4 slider for time

by Erik Zanker

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<div data-role="page" id="page1">
    <div data-role="header" data-position="fixed">
         <h1>My page</h1> 
    </div>
    <div role="main" class="ui-content">
        
        <div id="theTime" class="time-slider">
            <label for="sliderTime">Time:</label>
            <input type="range" name="sliderTime" id="sliderTime" data-highlight="true" min="0" max="1444" value="60" />
            <input type="text" data-role="none" class="timeLabel ui-shadow-inset ui-body-inherit ui-corner-all ui-slider-input" value="1:00" disabled />
        </div>
        
        
    </div>
</div>

CSS

.time-slider input[type=number] {
    display: none; 
}
.time-slider .timeLabel{
    position: relative;
    top: -38px;
}

JavaScript

$(document).on("pagecreate", "#page1", function(){
       
    $("#sliderTime").on("change", function(){
        var time = IntToTime($(this).val());
        $("#theTime .timeLabel").val(time);
        $("#theTime .ui-slider-handle").prop("title", time);
    });
    
});

function IntToTime(val){
    var hours = parseInt( val / 60 );
    var min = val - (hours * 60);
    var time = hours + ':' + (min < 10 ? '0' + min : min);
    return time;
}