Custom slider

I can’t seem to figure out how to make the slider’s value to move the mask off the image. Heres the code below, (its in 3 different classes) First class is the document class. Second class is class for the slider and last class is for the picture with mask.

package{
import flash.display.;
import flash.events.
;

public class AppController extends MovieClip{
    
    public function AppController(){
        trace("AppController created");
        
        //progNote.setValue(.5);
        slider.addEventListener(Event.CHANGE, doSliderChange);
        
        
    }
    
    public function doSliderChange(e:Event){
        progNote.setValue(e.target.value);
        
    }
  
}//end class

}//end package

package{
import flash.display.;
import flash.events.
;
import flash.geom.*;

public class CustomSlider extends MovieClip{
    var pDragging:Boolean = false;
    
    public function CustomSlider(){
        trace("CustomSlider created");
        
        knob.addEventListener(MouseEvent.MOUSE_DOWN, doMouseDown);
        stage.addEventListener(MouseEvent.MOUSE_UP, doMouseUP);
        
    }
    
    public function doMouseDown(e:Event):void{
        pDragging = true;
        knob.startDrag(true,new Rectangle(0,0, track.width, track.height));
    }
    
    public function doMouseUP(e:Event):void{
        if(pDragging) knob.stopDrag();
        
    }
    
    public function getPercentage():Number{
        return knob.x/track.width;
        
    }
    
}//end class

}//end package

package{
import flash.display.;
import flash.events.
;

public class ProgressBarNote extends MovieClip{
    
    public function ProgressBarNote(){
        trace("ProgressBarNote created");
        stop();
        
    }
    
    public function setValue(percent:Number):void{
        gotoAndStop(Math.ceil(percent * 100));
    
    }


}//end class

}//end package