Jquery UI time slider

Jquery slider synced with time

by amindaewang

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<p>
  <label for="amount">Time range:</label>
    <label id="from"></label> - <label id="to"></label>
      
</p>
 
<div id="slider-range"></div>

JavaScript

$(function() {
    $( "#slider-range" ).slider({
      range: true,
      min: 0,
      max: 600,
      values: [ 0, 600 ],
      slide: function( e, ui ) {
          var hours = Math.floor(ui.values[0] / 60);
          var minutes = ui.values[0] - (hours * 60);

          if(hours.length == 1) hours = '0' + hours;
          if(minutes.length == 1) minutes = '0' + minutes;

          $('#from').html(hours+':'+minutes);
          
          var tohours = Math.floor(ui.values[0] / 60);
          var tominutes = ui.values[0] - (tohours * 60);

          if(tohours.length == 1) tohours = '0' + tohours;
          if(tominutes.length == 1) tominutes = '0' + tominutes;

          $('#to').html(tohours+':'+tominutes);
      }
    });
  });