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>
        
        <br /><br />
        
        <div class="timeRangeSlider">
            <div id="theTimeRange" class="time-slider" data-role="rangeslider">
                <label for="time1">Time Range:</label>
                <input type="range" name="time1" id="time1" min="0" max="1444" value="100" />
                <label for="time2">Time Range:</label>
                    <input type="range" name="time2" id="time2" min="0" max="1444" value="1000" />
            </div>
            <input type="text" data-role="none" class="timeLabel ui-shadow-inset ui-body-inherit ui-corner-all ui-slider-input" value="" disabled />
            <input type="text" data-role="none" class="timeLabel2 ui-shadow-inset ui-body-inherit ui-corner-all ui-slider-input" value="" disabled />
            
        </div>
        
        
    </div>
</div>

CSS

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

.timeRangeSlider .timeLabel2{
    position: absolute;
    top: 30px;
    right: 0;
    left: auto;
}

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);
    });
    
    $("#time1").on("change", function(){
        var time = IntToTime($(this).val());
        $(this).closest(".timeRangeSlider").find(".timeLabel").val(time);
        $(this).closest(".timeRangeSlider").find(".ui-slider-handle").eq(0).prop("title", time);
    });
    $("#time2").on("change", function(){
        var time = IntToTime($(this).val());
        $(this).closest(".timeRangeSlider").find(".timeLabel2").val(time);
        $(this).closest(".timeRangeSlider").find(".ui-slider-handle").eq(1).prop("title", time);
    });
    
    
    $("#time1").trigger("change");
    $("#time2").trigger("change");
    $("#sliderTime").trigger("change");
    
});

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