Using slider's event API

In addition to the options we saw earlier, there are an additional four options that can be used to define functions which are executed at different times during a slider interaction. Any callback functions 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 with slider:

Function	Usage
change	Called when the slider handle stops and its value has changed.
slide	Called every time the slider handle moves.
start	Called when the slider handle starts moving.
stop	Called when the slider handle stops.

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

var sliderOpts = {
  start: function() {
		  
    $("#tip").fadeOut(function() {
      $(this).remove();
    });
  },
  change: function(e, ui) {
		    
    $("<div>").attr(...