HTML

<div class="row">
  <div class="col-md-2"><div class='alert alert-info' id=d1></div> 
</div></div>

<div class="row">
  <div class="col-md-1"><div id="slider_hour"  ></div><br>Hour</div>
<div class="col-md-1"><div id="slider_minute"  ></div><br>Minute</div>
<div class="col-md-1"><div id="slider_second"  ></div><br>Second</div>
</div>

JQuery

<script>
$(document).ready(function() {
var hour=minute=second=0;	
my_function=function my_function(){
	if(hour <=9){hour_d='0'+hour}else{hour_d=hour}
	if(minute <=9){minute_d='0'+minute}else{minute_d=minute}
	if(second <=9){second_d='0'+second}else{second_d=second}
$( "#d1" ).html( "<h1>"+hour_d +":"+minute_d+":"+second_d+"</h1>" );
}
 my_function();
//////////////////////////
$(function() {
$( "#slider_hour" ).slider({
orientation: "vertical",
min:0,
max:23,
step:1,
slide: function( event, ui ) {
 hour=ui.value; 
 my_function();
}
});
});
//////////////
$(function() {
$( "#slider_minute" ).slider({
 orientation: "vertical",
 min:0,
 max:59,
 step:1,
 slide: function( event, ui ) {
 minute=ui.value; 
 my_function();
 }
 });
 });
//////
$(function() {
 $( "#slider_second" ).slider({
 orientation: "vertical",
min:0,
max:59,
step:1,
 slide: function( event, ui ) {
 second=ui.value; 
 my_function();
 }
});
});
////////////////
})
</script>