title: jQuery UI Slider lags when sliding
body: <p>I have this video synced up with this jQuery UI Slider, it seems to lag behind and not feel smooth when scrubbing, any help?</p>
  
  <p><strong>DEMO:</strong> <a href="http://codepen.io/mistkaes/pen/MwONzK?editors=001" rel="nofollow">http://codepen.io/mistkaes/pen/MwONzK?editors=001</a></p>
  
  <p><strong>jQuery:</strong> </p>
  
  <pre><code>String.prototype.toHHMMSS = function() {
    var sec_num = parseInt(this, 10);
    var hours = Math.floor(sec_num / 3600);
    var minutes = Math.floor((sec_num - (hours * 3600)) / 60);
    var seconds = sec_num - (hours * 3600) - (minutes * 60);
  
    if (hours &lt; 10) {
      hours = "0" + hours;
    }
  
    if (minutes &lt; 10) {
      minutes = "0" + minutes;
    } 
  
    if (seconds &lt; 10) {
      seconds = "0" + seconds;
    }
  
    var time = hours + ":" + minutes + ":" + seconds;
    time = time.replace(/^0+/, '');
    time = time.replace(/^[^\w\s]/gi, '');
    return time;
  }
  
  $("#range").slider({
    range: "min",
     start: function(event, ui) { player.pauseVideo(); },
    stop: function(event, ui) { player.playVideo(); },
    slide: function(event, ui) {   
    //  player.pauseVideo();
      player.seekTo(ui.value,true);   
     return false;
    }
  });
  
  $("#volume-range").slider({
    range: "min",
    value: 50,
  });
  
  var tag = document.createElement('script');
  tag.src = "https://www.youtube.com/iframe_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  var player;
  
  function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
      height: '282',
      width: '502',
      videoId: 'QExOaGT_ids',
      playerVars: {
        'controls': 0,
        'showinfo': 0,
        'iv_load_policy': 3,
        'rel': 0,
      },
      events: {
        'onReady': onPlayerReady,
      }
    });
  }
  
  setInterval(function() {
    $("#content").text("video_time: " + player.getCurrentTime().toString().toHHMMSS());
  
    $("#range").slider("value", player.getCurrentTime());
    $("#range").slider("option", "max", player.getDuration());  
  }, 1);
  
  setInterval(function() {
      // VOLUME CONTROLS
    $("#volume-amount").text("volume: " + player.getVolume() + "%");
    player.setVolume($("#volume-range").slider("value"));
  }, 1);
  
  function onPlayerReady(event) {
    // auto-play video
    event.target.playVideo();
  }
  
  $(document).ready(function() {
    // READY
  }); 
  </code></pre>
  
  <p>As always, thanks for helping out!</p>