Detect when the jQuery UI slider is being moved?

Question

I have this custom video time UI slider to change the time of the YouTube video when scrubbed. My problem is that when the video is trying to load when the user is moving the slider, it causes the handle to jerk around and flip around. What I'm trying to find out is if can I make it so that when the user is moving the handle it won't try to load the video, instead it will just update once they let go of their mouse on the slider.

---

DEMO: http://codepen.io/mistkaes/pen/RPGzbX?editors=001

jQuery: 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 < 10) {
    hours = "0" + hours;
  }

  if (minutes < 10) {
    minutes = "0" + minutes;
  }

  if (seconds < 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",
  slide: function(event, ui) {player.seekTo(ui.value);}
});

$("#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
}); 

As always, thanks for helping!

Answer 1

You can use 3-Events:
- Start (Start-Sliding) -> Stop Player
- End (End-Sliding) -> Start Player
- Slide (Sliding) -> Move Player-Position

  $("#range").slider({
      range: "min",
       start: function(event, ui) {
          player.pauseVideo();
      },
      stop: function(event, ui) {
          player.playVideo();
      },
      slide: function(event, ui) {   
          player.seekTo(ui.value,true);   
          return false;
      }
    });

Demo: http://codepen.io/anon/pen/EjwMGV

Answer 2

Try adding a return:false; on the slide function. Like this:

$("#range").slider({
  range: "min",
  slide: function(event, ui) {    
    player.seekTo(ui.value,true);   
    return false;
  }
});