<?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>

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);
 
        }   
    }   
}

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;
        }
    }
}