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!

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

Related:

Dynamically select from a dynamically generated dropdown

why i don't get return value javascript

Div with the form of a pencil [duplicate]

How to remove legend from bottom of chart - amcharts

slideToggle state not working with multiple boxes

Detect when the jQuery UI slider is being moved?

Onclick add html content and remove it by clicking “delete” link

access the json encoded object returned by php in jquery

submitting form then showing loading image by javascript

Javscript Replace Text in tags without changing children element HTML and Content

How to remove unmatched row in html table using jquery

show/hide an overflow div on anchor

How to find the days b/w two long date values

change css dynamically by selecting dropdown list item

Converting “i+=n” for-loop to $.each

Parsing XML array using Jquery

Set default value for struts 2 autocompleter

HTML CSS Two 2-column tables side by side with same height and width

How to send current page number in Ajax request

How to remove all the borders of a selectbox?

Javascript change the souce of all images present inside a string

Centering navbar pills vertically within the navbar using flexbox

Get elements containing text from array

How do I display my mysql table column headers in my php/html output?

How to make background body overlay when use twitter-bootstrap popover?

Automatically calling server side class without

writing jQuery instead of $ to access controls in a page

Target next instance of an element/div

Top header 100% of screen, but body only 70%?

CSS - Linear Gradient Background Color no-repeat is not working for if it has multiple tds

HTML elements in Angular bindings expression

Click on link next link should be display on same page

Website showing differently in windows xp and mobile

Rerendering Handlebars template upon data change

show div only when printing

Identifier starts immediately after numeric literal

want to show and hide text using “this” jquery

tag in HAML