<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
	backgroundColor="#999999">

	<mx:Script>
		<![CDATA[
			
			// The Custom Image for the Slider Thumb 
			[Embed(source="assets/slider/slider_arrow.png")]
	    		public static const SLIDER_ARROW:Class;
	    
		]]>
	</mx:Script>
	
	
	
	<!--  STANDARD SLIDER  --> 
	<mx:HSlider width="100" height="1"
	 			 liveDragging="true"
	 			 />			
	 			 
	<mx:Spacer height="70" />
	
	
	<!--  SLIDER  WITH CUSTOM SKINS  --> 
	<mx:HSlider width="100" height="1"
	 			 trackSkin="skins.IconSliderTrack"
	 			 thumbSkin="{SLIDER_ARROW}"
	 			 sliderThumbClass="skins.IconSliderThumb"
	 			 liveDragging="true"
	 			 />
	
	
</mx:Application>



//==============================================================================
//skins/IconSliderTrack.as
//==============================================================================
package skins
{   
    import mx.core.UIComponent;   
  
    public class IconSliderTrack extends UIComponent   
    {   
           
        /**
        * Modify the default track layout
        * 
        */
        override protected function updateDisplayList(unscaledWidth:Number,
unscaledHeight:Number):void{   
            super.updateDisplayList(unscaledWidth, unscaledHeight);   
  			this.graphics.moveTo(0,0);   
            this.graphics.lineStyle(5,0x656565);   
	        
	        // Draw a curve instead of the classic line 
	      	this.graphics.curveTo(unscaledWidth, 40, unscaledWidth, 0)
	        
	        // Draw a Bold Line 
	        // NOTE: if you want to use this comment the previous line 
	        //this.graphics.lineTo(unscaledWidth,0);
	        
        }   
    }   
} 


//==============================================================================
//skins/IconSliderThumb.as
//==============================================================================
package skins {
	
    import mx.controls.sliderClasses.SliderThumb;

    public class IconSliderThumb extends SliderThumb {
        
        public function IconSliderThumb() {
            super();
            
            /**
            *  You need to manually update the thumb width 
            *  and height to the Thumg image dimensions,
            *  otherwise its displayed size won't be right.
            *  NOTE: try to comment following line to see the result 
            */             
            this.width = 36;
            this.height = 35;
            this.buttonMode = true;
        }
    }
}