Using the slider's event API

In addition to the options we saw earlier, there are another five options used to define functions that are executed at different times during a slider interaction. Any callback functions that we use are automatically passed the standard event object, and an object representing the slider. The following table lists the event options we can use:

Event	Fired when…
change	The slider's handle stops moving and its value has changed.
create	The slider is created
slide	The slider's handle moves.
start	The slider's handle starts moving.
stop	The slider's handle stops moving.

Hooking into these built-in callback functions is easy. Let's put a basic example together to see. Change the configuration object in slider10.html so that it appears as follows:

$("#mySlider").slider({
  start: function() {
    $("#tip").fadeOut(function() {
      $(this).remove();
    });
  },
  change: function(e, ui) {
    $("<div></div>", {
      "class": "ui...