flex4 hslider和vslider滑条高亮

在flex3中滑条高亮有个属性 showTrackHighlight="true"; 但是在flex4中不知道什么原因没有

后来在网上翻到一个别人重写的滑块组件 效果图如下：

Hslider.as

package com.bufoon.component
{
	{
		
		import com.bufoon.skin.HSliderSkin;
		
		import flash.events.Event;
		import flash.events.MouseEvent;
		import flash.geom.Point;
		
		import mx.core.InteractionMode;
		import mx.events.ResizeEvent;
		
		import spark.components.Button;
		import spark.components.HSlider;
		import spark.effects.animation.Animation;
		
		/**
		 *  The color for the slider track when it is selected.
		 *  
		 *  @langversion 3.0
		 *  @playerversion Flash 10
		 *  @playerversion AIR 1.5
		 *  @productversion Flex 4
		 */
		[Style(name="accentColor", type="uint", format="Color", inherit="yes", theme="spark")]
		
		/**
		 *  Specifies whether to enable track highlighting between thumbs
		 *  (or a single thumb and the beginning of the track).
		 *
		 *  @default false
		 *  
		 *  @langversion 3.0
		 *  @playerversion Flash 10
		 *  @playerversion AIR 1.5
		 *  @productversion Flex 4
		 */
		[Style(name="showTrackHighlight", type="Boolean", inherit="no")]
		
		public class HSlider extends spark.components.HSlider
		{
			/**
			 *  @private
			 */
			private var animator:Animation = null;
			
			[SkinPart(required="false")]
			public var trackHighLight:Button;
			
			[Bindable]
			private var _accentColor:uint;
			private var accentColorChanged:Boolean
			
			[Bindable]
			private var _showTrackHighlight:Boolean = true;
			private var showTrackHighlightChanged:Boolean;
			
			public function HSlider()
			{
				super();
				setStyle("skinClass", HSliderSkin);
			}
			
			
			/**
			 *  @private
			 */
			override protected function updateSkinDisplayList():void
			{
				super.updateSkinDisplayList();
				if (!thumb || !track || !trackHighLight)
					return;
				
				var thumbRange:Number = track.getLayoutBoundsWidth() - thumb.getLayoutBoundsWidth();
				var range:Number = maximum - minimum;
				
				// calculate new thumb position.
				var thumbPosTrackX:Number = (range > 0) ? ((pendingValue - minimum) / range) * thumbRange : 0;
				
				// convert to parent's coordinates.
				var thumbPos:Point = track.localToGlobal(new Point(thumbPosTrackX, 0));
				var thumbPosParentX:Number = thumb.parent.globalToLocal(thumbPos).x+thumb.getLayoutBoundsWidth()/2;
				
				//thumb.setLayoutBoundsPosition(Math.round(thumbPosParentX), thumb.getLayoutBoundsY());
				trackHighLight.setLayoutBoundsSize(Math.round(thumbPosParentX), trackHighLight.getLayoutBoundsHeight());
			}
			
			/**
			 *  @private
			 *  Warning: the goal of the listeners added here (and removed below) is to 
			 *  give the TrackBase a change to fixup the thumb's size and position
			 *  after the skin's BasicLayout has run.   This particular implementation
			 *  is a hack and it begs a solution to the general problem of what we've
			 *  called "cooperative layout".   More about that here:
			 *  http://opensource.adobe.com/wiki/display/flexsdk/Cooperative+Subtree+Layout
			 */
			override protected function partAdded(partName:String, instance:Object):void
			{
				super.partAdded(partName, instance);
				
				if (instance == trackHighLight)
				{
					trackHighLight.focusEnabled = false;
					trackHighLight.addEventListener(ResizeEvent.RESIZE, trackHighLight_resizeHandler);
					
					// track is only clickable if in mouse interactionMode
					if (getStyle("interactionMode") == InteractionMode.MOUSE)
						trackHighLight.addEventListener(MouseEvent.MOUSE_DOWN, trackHighLight_mouseDownHandler);
				}
			}
			
			/**
			 *  @private
			 */
			override protected function partRemoved(partName:String, instance:Object):void
			{
				super.partRemoved(partName, instance);
				
				if (instance == trackHighLight)
				{
					trackHighLight.removeEventListener(MouseEvent.MOUSE_DOWN, trackHighLight_mouseDownHandler);
					trackHighLight.removeEventListener(ResizeEvent.RESIZE, trackHighLight_resizeHandler);
				}
			}
			
			/**
			 *  @private
			 *  Handle mouse-down events for the slider track hightlight. We
			 *  calculate the value based on the new position and then
			 *  move the thumb to the correct location as well as
			 *  commit the value.
			 */
			protected function trackHighLight_mouseDownHandler(event:MouseEvent):void
			{
				this.track_mouseDownHandler(event);
			}
			
			/**
			 *  @private
			 */
			private function trackHighLight_resizeHandler(event:Event):void
			{
				updateSkinDisplayList();
			}
			
			/**
			 *  @private
			 */
			override public function styleChanged(styleProp:String):void
			{
				var anyStyle:Boolean = styleProp == null || styleProp == "styleName";
				
				super.styleChanged(styleProp);
				if (styleProp == "showTrackHighlight" || anyStyle)
				{
					showTrackHighlightChanged = true;
					invalidateProperties();
				}
				
				if (styleProp == "accentColor" || anyStyle)
				{
					accentColorChanged = true;
					invalidateProperties();
				}
				
				invalidateDisplayList();
			}
			
			override protected function commitProperties():void
			{
				super.commitProperties();
				
				if (showTrackHighlightChanged)
				{
					this.trackHighLight.visible = this._showTrackHighlight;
					showTrackHighlightChanged = false;
				}
				if(accentColorChanged){
					this.trackHighLight.setStyle("themeColor", this.accentColor);
					accentColorChanged = false;
				}
			}
			
			public function set accentColor(color:uint):void
			{
				this._accentColor = color;
				accentColorChanged = true;
				this.invalidateProperties();
			}
			
			
			public function get accentColor():uint
			{
				return this._accentColor;
			}
			
			public function set showTrackHighlight(show:Boolean):void
			{
				this._showTrackHighlight = show;
				showTrackHighlightChanged = true;
				this.invalidateProperties();
			}
			
			public function get showTrackHighlight():Boolean
			{
				return this._showTrackHighlight;
			}
		}
	}
}

HSliderSkin.mxml

<?xml version="1.0" encoding="utf-8"?>

<!--

ADOBE SYSTEMS INCORPORATED
Copyright 2008 Adobe Systems Incorporated
All Rights Reserved.

NOTICE: Adobe permits you to use, modify, and distribute this file
in accordance with the terms of the license agreement accompanying it.
-->

<!--- The default skin class for the Spark HSlider component. The thumb and track skins are defined by the
HsliderTrackHighLightSkin, HSliderThumbSkin and HSliderTrackSkin,  classes, respectively.  

@see de.patrickheinzelmann.components.spark.HSlider
@see spark.skins.spark.HSliderThumbSkin
@see spark.skins.spark.HSliderTrackSkin
@see de.patrickheinzelmann.components.spark.skins.HsliderTrackHighLightSkin

@langversion 3.0
@playerversion Flash 10
@playerversion AIR 1.5
@productversion Flex 4
-->
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
			 xmlns:fb="http://ns.adobe.com/flashbuilder/2009" minHeight="11" alpha.disabled="0.5">
	
	<fx:Metadata>
		<![CDATA[ 
		/** 
		* @copy spark.skins.spark.ApplicationSkin#hostComponent
		*/
		[HostComponent("com.bufoon.component.HSlider")]
		]]>
	</fx:Metadata> 
	
		<fx:Script fb:purpose="styling">
		/* Define the skin elements that should not be colorized. 
		For slider, the skin itself is colorized but the individual parts are not. */
		static private const exclusions:Array = ["track", "thumb", "trackHighLight"];
		
		/**
		 * @private
		 */  
		override public function get colorizeExclusions():Array {return exclusions;}
		
		/**
		 * @private
		 */
		override protected function initializationComplete():void
		{
			useChromeColor = true;
			super.initializationComplete();
		}
	</fx:Script>
	
		<fx:Script>
		/**
		 *  @private
		 */  
		override protected function measure() : void
		{
			// Temporarily move the thumb to the left of the Slider so measurement
			// doesn't factor in its x position. This allows resizing the
			// HSlider to less than 100px in width. 
			var thumbPos:Number = thumb.getLayoutBoundsX();
			thumb.setLayoutBoundsPosition(0, thumb.getLayoutBoundsY());
			super.measure();
			thumb.setLayoutBoundsPosition(thumbPos, thumb.getLayoutBoundsY());
		}
	</fx:Script>
	
	<s:states>
		<s:State name="normal" />
		<s:State name="disabled" />
	</s:states>
	
	<fx:Declarations>
		<!--- The tooltip used in the mx.controls.Slider control. 
		To customize the DataTip's appearance, create a custom HSliderSkin class.-->
		<fx:Component id="dataTip">     
			<s:DataRenderer minHeight="24" minWidth="40" y="-34">  
				<s:Rect top="0" left="0" right="0" bottom="0">
					<s:fill>
						<s:SolidColor color="0x000000" alpha=".9"/>
					</s:fill>
					<s:filters>
						<s:DropShadowFilter angle="90" color="0x999999" distance="3"/>
					</s:filters>
				</s:Rect>
				<s:Label id="labelDisplay" text="{data}"
						 horizontalCenter="0" verticalCenter="1"
						 left="5" right="5" top="5" bottom="5"
						 textAlign="center" verticalAlign="middle"
						 fontWeight="normal" color="white" fontSize="11">
				</s:Label>
			</s:DataRenderer>
		</fx:Component>
	</fx:Declarations>
	
	<!--- The default skin class is HSliderTrackSkin. 
	@copy spark.components.supportClasses.TrackBase#trackHighlight
	@see spark.skins.spark.HSliderTrackSkin -->
	<s:Button id="track" left="0" right="0" top="0" bottom="0" minWidth="33" width="100"
			  skinClass="spark.skins.spark.HSliderTrackSkin" />
	
	<!--- The default skin class is HSliderTrackSkin. 
	@copy spark.components.supportClasses.TrackBase#track
	@see de.patrickheinzelmann.components.spark.skins.HsliderTrackHighLightSkin -->
	<s:Button id="trackHighLight" left="0" right="0" top="0" bottom="0" minWidth="33" width="100"
			  skinClass="com.bufoon.skin.HSliderTrackHighLightSkin" />
	
	<!--- The default skin class is HSliderThumbSkin.
	@copy spark.components.supportClasses.TrackBase#thumb 
	@see spark.skins.spark.HSliderThumbSkin -->
	<s:Button id="thumb" top="0" bottom="0" width="11" height="11" 
			  skinClass="spark.skins.spark.HSliderThumbSkin" accentColor="0xFF00FF" />
</s:SparkSkin>

HSliderTrackHighLightSkin.mxml

<?xml version="1.0" encoding="utf-8"?>

<!--

ADOBE SYSTEMS INCORPORATED
Copyright 2008 Adobe Systems Incorporated
All Rights Reserved.

NOTICE: Adobe permits you to use, modify, and distribute this file
in accordance with the terms of the license agreement accompanying it.

-->

<!--- The default skin class for the track of a Spark HSlider component.  

@see spark.components.HSlider

@langversion 3.0
@playerversion Flash 10
@playerversion AIR 1.5
@productversion Flex 4
-->
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
			 xmlns:fb="http://ns.adobe.com/flashbuilder/2009">
	
	<fx:Metadata>
		<![CDATA[ 
		/** 
		* @copy spark.skins.spark.ApplicationSkin#hostComponent
		*/
		[HostComponent("spark.components.Button")]
		]]>
	</fx:Metadata> 
	
		<fx:Script fb:purpose="styling">
		[Bindable]
		private var highlightColor:uint;
		
		/**
		 * @private
		 */
		override protected function initializationComplete():void
		{
			highlightColor = this.getStyle("themeColor");
			super.initializationComplete();
		}
		
		override public function styleChanged(styleProp:String):void
		{
			super.styleChanged(styleProp);
			if(styleProp == "themeColor"){
				var trackHighlightColor:uint = this.getStyle("themeColor");
				highlightColor = trackHighlightColor;
			}
		}
	</fx:Script>
	
	<s:states>
		<s:State name="up" />
		<s:State name="down" />
		<s:State name="over" />
		<s:State name="disabled" />
	</s:states>
	
	<!-- fill -->
	<s:Rect left="1" right="1" top="4" bottom="4" bottomLeftRadiusX="2" bottomLeftRadiusY="2" topLeftRadiusX="2" topLeftRadiusY="2" bottomRightRadiusX="0" bottomRightRadiusY="0" topRightRadiusX="0" topRightRadiusY="0">
		<s:fill>
			<s:SolidColor color="{highlightColor}" alpha="0.5" />
		</s:fill>
	</s:Rect>
	
	<!-- hit area -->
	<s:Rect left="0" right="0" top="0" bottom="0">
		<s:fill>
			<s:SolidColor alpha="0"/>
		</s:fill>
	</s:Rect>
</s:SparkSkin>

VSlider.as

package com.bufoon.component
{
	
	import com.bufoon.skin.VSliderSkin;
	
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.geom.Point;
	
	import mx.core.InteractionMode;
	import mx.events.ResizeEvent;
	
	import spark.components.Button;
	
	/**
	 *  The color for the slider track when it is selected.
	 *  
	 *  @langversion 3.0
	 *  @playerversion Flash 10
	 *  @playerversion AIR 1.5
	 *  @productversion Flex 4
	 */
	[Style(name="accentColor", type="uint", format="Color", inherit="yes", theme="spark")]
	
	/**
	 *  Specifies whether to enable track highlighting between thumbs
	 *  (or a single thumb and the beginning of the track).
	 *
	 *  @default false
	 *  
	 *  @langversion 3.0
	 *  @playerversion Flash 10
	 *  @playerversion AIR 1.5
	 *  @productversion Flex 4
	 */
	[Style(name="showTrackHighlight", type="Boolean", inherit="no")]
	
	public class VSlider extends spark.components.VSlider
	{
		[SkinPart(required="false")]
		public var trackHighLight:Button;
		
		[Bindable]
		private var _accentColor:uint;
		private var accentColorChanged:Boolean;
		
		[Bindable]
		private var _showTrackHighlight:Boolean = true;
		private var showTrackHighlightChanged:Boolean;
		
		public function VSlider()
		{
			super();
			setStyle("skinClass", VSliderSkin);
		}
		
		/**
		 *  @private
		 */
		override protected function updateSkinDisplayList():void
		{
			super.updateSkinDisplayList();
			if (!thumb || !track || !trackHighLight)
				return;
			
			var thumbRange:Number = track.getLayoutBoundsHeight() - thumb.getLayoutBoundsHeight();
			var range:Number = maximum - minimum;
			
			// calculate new thumb position.
			var thumbPosTrackY:Number = (range > 0) ? thumbRange - (((pendingValue - minimum) / range) * thumbRange) : 0;
			
			// convert to parent's coordinates.
			var thumbPos:Point = track.localToGlobal(new Point(0, thumbPosTrackY));
			var thumbPosParentY:Number = thumb.parent.globalToLocal(thumbPos).y+thumb.getLayoutBoundsHeight()/2;
			
			trackHighLight.setLayoutBoundsPosition(trackHighLight.getLayoutBoundsX(), thumbPosParentY);
			trackHighLight.setLayoutBoundsSize( trackHighLight.getLayoutBoundsWidth(), track.getLayoutBoundsHeight()-thumbPosParentY);
		}
		
		/**
		 *  @private
		 *  Warning: the goal of the listeners added here (and removed below) is to 
		 *  give the TrackBase a change to fixup the thumb's size and position
		 *  after the skin's BasicLayout has run.   This particular implementation
		 *  is a hack and it begs a solution to the general problem of what we've
		 *  called "cooperative layout".   More about that here:
		 *  http://opensource.adobe.com/wiki/display/flexsdk/Cooperative+Subtree+Layout
		 */
		override protected function partAdded(partName:String, instance:Object):void
		{
			super.partAdded(partName, instance);
			
			if (instance == trackHighLight)
			{
				trackHighLight.focusEnabled = false;
				trackHighLight.addEventListener(ResizeEvent.RESIZE, trackHighLight_resizeHandler);
				
				// track is only clickable if in mouse interactionMode
				if (getStyle("interactionMode") == InteractionMode.MOUSE)
					trackHighLight.addEventListener(MouseEvent.MOUSE_DOWN, trackHighLight_mouseDownHandler);
			}
		}
		
		/**
		 *  @private
		 */
		override protected function partRemoved(partName:String, instance:Object):void
		{
			super.partRemoved(partName, instance);
			
			if (instance == trackHighLight)
			{
				trackHighLight.removeEventListener(MouseEvent.MOUSE_DOWN, trackHighLight_mouseDownHandler);
				trackHighLight.removeEventListener(ResizeEvent.RESIZE, trackHighLight_resizeHandler);
			}
		}
		
		/**
		 *  @private
		 *  Handle mouse-down events for the slider track hightlight. We
		 *  calculate the value based on the new position and then
		 *  move the thumb to the correct location as well as
		 *  commit the value.
		 */
		protected function trackHighLight_mouseDownHandler(event:MouseEvent):void
		{
			this.track_mouseDownHandler(event);
		}
		
		/**
		 *  @private
		 */
		private function trackHighLight_resizeHandler(event:Event):void
		{
			updateSkinDisplayList();
		}
		
		/**
		 *  @private
		 */
		override public function styleChanged(styleProp:String):void
		{
			var anyStyle:Boolean = styleProp == null || styleProp == "styleName";
			
			super.styleChanged(styleProp);
			if (styleProp == "showTrackHighlight" || anyStyle)
			{
				showTrackHighlightChanged = true;
				invalidateProperties();
			}
			
			if (styleProp == "accentColor" || anyStyle)
			{
				accentColorChanged = true;
				invalidateProperties();
			}
			
			invalidateDisplayList();
		}
		
		override protected function commitProperties():void
		{
			super.commitProperties();
			
			if (showTrackHighlightChanged)
			{
				this.trackHighLight.visible = this._showTrackHighlight;
				showTrackHighlightChanged = false;
			}
			
			if(accentColorChanged){
				this.trackHighLight.setStyle("themeColor", this.accentColor);
				accentColorChanged = false;
			}
		}
		
		public function set accentColor(color:uint):void
		{
			this._accentColor = color;
			this.accentColorChanged = true;
			this.invalidateProperties();
		}
		
		
		public function get accentColor():uint
		{
			return this._accentColor;
		}
		
		public function set showTrackHighlight(show:Boolean):void
		{
			this._showTrackHighlight = show;
			showTrackHighlightChanged = true;
			this.invalidateProperties();
		}
		
		public function get showTrackHighlight():Boolean
		{
			return this._showTrackHighlight;
		}
	}
}

VSliderSkin.mxml

<?xml version="1.0" encoding="utf-8"?>

<!--

ADOBE SYSTEMS INCORPORATED
Copyright 2008 Adobe Systems Incorporated
All Rights Reserved.

NOTICE: Adobe permits you to use, modify, and distribute this file
in accordance with the terms of the license agreement accompanying it.
-->

<!--- The default skin class for the Spark VSlider component. The thumb and track skins are defined by the
VSliderThumbSkin and VSliderTrackSkin classes, respectively.  

@see spark.components.VSlider
@see spark.skins.spark.VSliderThumbSkin
@see spark.skins.spark.VSliderTrackSkin

@langversion 3.0
@playerversion Flash 10
@playerversion AIR 1.5
@productversion Flex 4
-->
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
			 xmlns:fb="http://ns.adobe.com/flashbuilder/2009" minWidth="11" alpha.disabled="0.5">
	<fx:Metadata>[HostComponent("com.bufoon.component.VSlider")]</fx:Metadata>
	
		<fx:Script fb:purpose="styling">
		/* Define the skin elements that should not be colorized. 
		For slider, the skin itself is colorized but the individual parts are not. */
		static private const exclusions:Array = ["track", "thumb", "trackHighLight"];
		
		/**
		 * @private
		 */   
		override public function get colorizeExclusions():Array {return exclusions;}
		
		/**
		 * @private
		 */
		override protected function initializationComplete():void
		{
			useChromeColor = true;
			super.initializationComplete();
		}
	</fx:Script>
	
		<fx:Script>
		/**
		 *  @private
		 */  
		override protected function measure() : void
		{
			// Temporarily move the thumb to the top of the Slider so measurement
			// doesn't factor in its y position. This allows resizing the
			// VSlider to less than 100px in height. 
			var thumbPos:Number = thumb.getLayoutBoundsY();
			thumb.setLayoutBoundsPosition(thumb.getLayoutBoundsX(), 0);
			super.measure();
			thumb.setLayoutBoundsPosition(thumb.getLayoutBoundsX(), thumbPos);
		}
	</fx:Script>
	
	<s:states>
		<s:State name="normal" />
		<s:State name="disabled" />
	</s:states>
	
	<fx:Declarations>
		<!--- The tooltip used in the mx.controls.Slider control.
		To customize the DataTip's appearance, create a custom VSliderSkin class. -->
		<fx:Component id="dataTip">
			<s:DataRenderer minHeight="24" minWidth="40" x="20"> 
				<s:Rect top="0" left="0" right="0" bottom="0">
					<s:fill>
						<s:SolidColor color="0x000000" alpha=".9"/>
					</s:fill>
					<s:filters>
						<s:DropShadowFilter angle="90" color="0x999999" distance="3"/>
					</s:filters>
				</s:Rect>
				<s:Label id="labelDisplay" text="{data}"
						 horizontalCenter="0" verticalCenter="1"
						 left="5" right="5" top="5" bottom="5"
						 textAlign="center" verticalAlign="middle"
						 fontWeight="normal" color="white" fontSize="11">
				</s:Label>
			</s:DataRenderer>
		</fx:Component>
	</fx:Declarations>
	
	<!--- The default skin class is VSliderTrackSkin.
	@copy spark.components.supportClasses.TrackBase#track 
	@see spark.skins.spark.VSliderTrackSkin -->
	<s:Button id="track" left="0" right="0" top="0" bottom="0" minHeight="33" height="100"
			  skinClass="spark.skins.spark.VSliderTrackSkin" />
	
	<!--- The default skin class is VSliderTrackSkin. 
	@copy spark.components.supportClasses.TrackBase#trackHighLight
	@see de.patrickheinzelmann.components.spark.skins.VsliderTrackHighLightSkin -->
	<s:Button id="trackHighLight" left="0" right="0" top="0" bottom="0" minHeight="33" height="100"
			  skinClass="com.bufoon.skin.VSliderTrackHighLightSkin" />
	
	<!--- The default skin class is VSliderThumbSkin. 
	@copy spark.components.supportClasses.TrackBase#thumb
	@see spark.skins.spark.VSliderThumbSkin -->
	<s:Button id="thumb" left="0" right="0" width="11" height="11" 
			  skinClass="spark.skins.spark.VSliderThumbSkin" />
	
</s:SparkSkin>

VSliderTrackHighLightSkin.mxml

<?xml version="1.0" encoding="utf-8"?>

<!--

ADOBE SYSTEMS INCORPORATED
Copyright 2008 Adobe Systems Incorporated
All Rights Reserved.

NOTICE: Adobe permits you to use, modify, and distribute this file
in accordance with the terms of the license agreement accompanying it.

-->

<!--- The default skin class for the track of a Spark VSlider component.  

@see spark.components.VSlider

@langversion 3.0
@playerversion Flash 10
@playerversion AIR 1.5
@productversion Flex 4
-->
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
			 xmlns:fb="http://ns.adobe.com/flashbuilder/2009">
	
	<fx:Metadata>
		<![CDATA[ 
		/** 
		* @copy spark.skins.spark.ApplicationSkin#hostComponent
		*/
		[HostComponent("spark.components.Button")]
		]]>
	</fx:Metadata> 
	
		<fx:Script fb:purpose="styling">
		[Bindable]
		private var highlightColor:uint;
		
		/**
		 * @private
		 */
		override protected function initializationComplete():void
		{
			highlightColor = this.getStyle("themeColor");
			super.initializationComplete();
		}
		
		override public function styleChanged(styleProp:String):void
		{
			super.styleChanged(styleProp);
			if(styleProp == "themeColor"){
				var trackHighlightColor:uint = this.getStyle("themeColor");
				highlightColor = trackHighlightColor;
			}
		}
	</fx:Script>
	
	<s:states>
		<s:State name="up" />
		<s:State name="down" />
		<s:State name="over" />
		<s:State name="disabled" />
	</s:states>
	
	<!-- fill -->
	<s:Rect left="4" right="4" top="1" bottom="1" radiusX="2" radiusY="2">
		<s:fill>
			<s:SolidColor color="{highlightColor}" alpha="0.5" />
		</s:fill>
	</s:Rect>
	
	<!-- hit area -->
	<s:Rect left="0" right="0" top="0" bottom="0">
		<s:fill>
			<s:SolidColor alpha="0"/>
		</s:fill>
	</s:Rect>
</s:SparkSkin>

使用方法

<component:HSlider showTrackHighlight="true" accentColor="0xff0000"/>
	<component:VSlider showTrackHighlight="true" accentColor="0xff0000"/>

原文地址：  http://www.patrick-heinzelmann.de/blog/2011/01/25/spark-slider-with-track-highlight/