Jquery UI video synced time slider

Jquery slider synced with time line in a video

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>
<video id="video" controls="" preload="none" poster="http://media.w3.org/2010/05/sintel/poster.png">
      <source id="mp4" src="http://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4">
      <source id="webm" src="http://media.w3.org/2010/05/sintel/trailer.webm" type="video/webm">
      <source id="ogv" src="http://media.w3.org/2010/05/sintel/trailer.ogv" type="video/ogg">

      <p>Your user agent does not support the HTML5 Video element.</p>
    </video>
<p>
  <label>Time range:</label>
  <label id="from"></label> - <label id="to"></label> 
</p>
 
<div id="slider-range"></div>
          <label id="videoduration">duration</label>
          <input id="duration" type="button" value="get duration">

JavaScript

$(function() {
    $( "#slider-range" ).slider({
      range: true,
      min: 0,
      max: 60,
      values: [ 0, 60 ],
      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[1] / 60);
          var tominutes = ui.values[1] - (tohours * 60);

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

          $('#to').html(tohours+':'+tominutes);
      }
    });   
    
    var vid = $('#video').get(0);
       
    vid.addEventListener('loadedmetadata', function(){
        
        console.log(vid.readyState);
        console.log(Math.round(vid.duration));
    });
 
  });