# Custom slider

**URL:** <https://forum.kirupa.com/t/custom-slider/281002>\
**Category:** flash\
**Created:** [February 3, 2009, 8:20pm UTC](https://forum.kirupa.com/t/custom-slider/281002 "2009-02-03T20:20:42Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![Joserinu](https://avatars.discourse-cdn.com/v4/letter/j/edb3f5/32.png) [@Joserinu](https://forum.kirupa.com/u/Joserinu)\
**Post date:** [February 3, 2009, 8:20pm UTC](https://forum.kirupa.com/t/custom-slider/281002/1 "2009-02-03T20:20:42Z")

</div>

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