Creating a custom track skin on a Spark HSlider control in Flex 4

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/04/14/creating-a-custom-track-skin-on-a-spark-hslider-control-in-flex-4/ -->
<s:Application name="Spark_HSlider_track_skinClass_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx">
    <s:controlBarContent>
        <mx:Form>
            <mx:FormItem label="height:">
                <s:HSlider id="sl" minimum="11" maximum="96" value="11" />
            </mx:FormItem>
        </mx:Form>
    </s:controlBarContent>
 
    <s:HSlider id="sldr"
            skinClass="skins.CustomHSliderSkin"
            height="{sl.value}"
            horizontalCenter="0" verticalCenter="0" />
 
</s:Application>

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/04/14/creating-a-custom-track-skin-on-a-spark-hslider-control-in-flex-4/ -->
<s:SparkSkin name="CustomHSliderSkin"
        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">
    <!-- states -->
    <s:states>
        <s:State name="normal" />
        <s:State name="disabled" />
    </s:states>
 
    <fx:Metadata>
        [HostComponent("spark.components.HSlider")]
    </fx:Metadata>
 
    <fx:Script fb:purpose="styling">
        <![CDATA[
            /* 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"];
 
            override public function get colorizeExclusions():Array {
                return exclusions;
            }
 
            override protected function initializationComplete():void {
                useChromeColor = true;
                super.initializationComplete();
            }
        ]]>
    </fx:Script>
 
    <fx:Script>
        <![CDATA[
            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>
 
    <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="0.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. -->
    <s:Button id="track" left="0" right="0" top="0" bottom="0" minWidth="33" width="100"
              skinClass="skins.CustomHSliderTrackSkin" />
 
    <!--- The default skin class is HSliderThumbSkin. -->
    <s:Button id="thumb" top="0" bottom="0" width="11" height="11"
              skinClass="spark.skins.spark.HSliderThumbSkin" />
 
</s:SparkSkin>

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/04/14/creating-a-custom-track-skin-on-a-spark-hslider-control-in-flex-4/ -->
<s:SparkSkin name="CustomHSliderTrackSkin"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:fb="http://ns.adobe.com/flashbuilder/2009">
    <!-- states -->
    <s:states>
        <s:State name="up" />
        <s:State name="down" />
        <s:State name="over" />
        <s:State name="disabled" />
    </s:states>
 
    <fx:Metadata>
        [HostComponent("spark.components.Button")]
    </fx:Metadata> 
 
    <fx:Script fb:purpose="styling">
        <![CDATA[
            override protected function initializationComplete():void {
                useChromeColor = true;
                super.initializationComplete();
            }
        ]]>
    </fx:Script>
 
    <!-- border -->
    <s:Rect left="0" right="0" top="3" bottom="3" radiusX="2" radiusY="2" height="5">
        <s:fill>
            <s:LinearGradient rotation="90" >
                <s:GradientEntry color="0x000000" alpha="0.55" />
                <s:GradientEntry color="0xFFFFFF" alpha="0.55" ratio="0.8" />
            </s:LinearGradient>
        </s:fill>
    </s:Rect>
 
    <!-- fill -->
    <s:Rect left="1" right="1" top="4" bottom="4" radiusX="2" radiusY="2">
        <s:fill>
            <s:BitmapFill source="@Embed('skins/pattern_143.gif')" fillMode="repeat" />
        </s:fill>
    </s:Rect>
 
    <!-- shadow -->
    <s:Rect left="2" right="2" top="4" height="1">
        <s:fill>
            <s:SolidColor color="0x9E9E9E" />
        </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>