Timepicker with sliders

With a nifty little confirm button

by Victor

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<div class="timePicker">    
    <div class="timeDisplays">
        <div class="hourDisplay">12</div>
        <div>:</div>
        <div class="minuteDisplay">00</div>
        <div class="nightDayDisplay">PM</div>
        <div class="confirmTime"><span class="fa fa-check"></span></div>
    </div>
    
    <div class="hourSlider"></div>
    <div class="minuteSlider"></div>
    <div class="nightDaySlider"></div>
</div>

CSS

.timePicker {
    padding:10px;
    border:1px solid #999;
    display:inline-block;
    border-radius:4px;
}
.ui-slider {
    float:left;
    margin-top: 10px;
    margin-left:8px;
    margin-right: 8px;
    margin-bottom: 10px;;
}
.timePicker .ui-slider:last {
    margin-right: 0 !important;
}
.ui-slider-handle {
    border-radius:50%;
}
.ui-slider-range {
    background: #F2F2F2;
}
.timeDisplays {
    clear:none;
    /* margin-top: 20px; */
    padding:3px 0px;
    margin-bottom: 10px;
    text-align: center;
}
.timeDisplays div {
    padding:0;
    margin:0;
    /* float:left; */
    display:inline-block;;
}
.ui-slider {
    height:60px;
}
.nightDayDisplay {
    width:20px;
}


.confirmTime {
    background:#2ECC71;
    height:20px;
    width:20px;
    border-radius:10px;
    margin-left: 7px !important;
    color:white;
}

JavaScript

$('.minuteSlider').slider({
 orientation: "vertical",
range: "min",
min: 00,
max: 59,
value: 30,
     slide: function( event, ui ) {
$( ".minuteDisplay" ).html( ui.value );
}
});


$('.hourSlider').slider({
 orientation: "vertical",
range: "min",
min: 1,
max: 12,
value: 6,
     slide: function( event, ui ) {
$( ".hourDisplay" ).html( ui.value );
}
});


$('.nightDaySlider').slider({
 orientation: "vertical",
range: "min",
min: 0,
max: 1,
value: 1,
     slide: function( event, ui ) {
         if(ui.value === 1){
             $( ".nightDayDisplay" ).html( 'PM' );
         } else {
         $( ".nightDayDisplay" ).html( 'AM' );
         }
}
});