A basic, functional slider component for HTML5 canvas in Adobe Animate

Just recently, I needed to convert a project using a slider from Actionscript3 to HTML5 in Adobe Animate and discovered that Animate does not <added-kglad> include a built-in slider component for HTML5 canvas projects, like they do for actionscript.  If anyone is looking for a basic, functional slider component i'm including the code I used below. 

Note: My slider is a movie symbol to control the timeline of a movie clip/symbol.  To keep it simple, I'm calling all children to the stage, except for the 'Slider' and the 'Slider Bar' which sits on seperate layer beneath the slider.  The Slider moves along the x-axis and stops between 100 px and 800 px.  Customize the Slider and the Slider Bar to your needs.  The range (length) of the slider can be changed Actions.  For my needs, I've constrained the Slider to the X-axis, but the slider can also be used along the x and y axis to offer unlimited sliding range.

Not shown in the images: redrectangle, bluerectangle, SineCosineMovie, and Slider are all movies, and the instance names and linkages are labelled similarly. 

Give it a try.  Hope this works for everyone.

var SineCosineMovie = new lib.SineCosineMovie();
var redrectangle = new lib.redrectangle();
var bluerectangle = new lib.bluerectangle();
 
SineCosineMovie.x = 0; 
SineCosineMovie.y = 0;
bluerectangle.x = 100; 
bluerectangle.y = 550;
redrectangle.x = 800; 
redrectangle.y = 550;
 
this.addChild(SineCosineMovie)
this.addChild(redrectangle);
this.addChild(bluerectangle);
 
var root = this;
this.Slider.on("pressmove", moveSlider );
 
function moveSlider(e) {
        root.removeChild(SineCosineMovie);
       var p = stage.globalToLocal(e.stageX, e.stageY)
       root.Slider.x= (p.x);
 
//To add x and y range to your slider add the code below//
/*root.Slider.y=(p.y)*/
 
	if(root.Slider.x < 100 ) {
	root.Slider.x= 100;
}
	if(root.Slider.x > 800 ) {
	root.Slider.x= 800;
}
	root.addChild(SineCosineMovie).gotoAndStop(root.Slider.x);
}  

WorkspaceTesting the slider/*root.Slider.y=(p.y)*/

if(root.Slider.x < 100 ) {

root.Slider.x= 100;

}

if(root.Slider.x > 800 ) {

root.Slider.x= 800;

}

root.addChild(SineCosineMovie).gotoAndStop(root.Slider.x);

}