Creating a custom Spark HSlider thumb in Flex 4

<?xml version="1.0" encoding="utf-8"?> 
<!-- http://blog.flexexamples.com/2010/04/23/creating-a-custom-spark-hslider-thumb-in-flex-4/ -->
<s:Application name="Spark_HSlider_thumb_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="red:">
                <s:HSlider id="rSl"
                        maximum="0xFF"
                        skinClass="skins.CustomHSliderSkin"
                        showDataTip="false"
                        change="setFillColor(rSl.value, gSl.value, bSl.value);" />
            </mx:FormItem>
            <mx:FormItem label="green:">
                <s:HSlider id="gSl"
                        maximum="0xFF"
                        skinClass="skins.CustomHSliderSkin"
                        showDataTip="false"
                        change="setFillColor(rSl.value, gSl.value, bSl.value);" />
            </mx:FormItem>
            <mx:FormItem label="blue:">
                <s:HSlider id="bSl"
                        maximum="0xFF"
                        skinClass="skins.CustomHSliderSkin"
                        showDataTip="false"
                        change="setFillColor(rSl.value, gSl.value, bSl.value);" />
            </mx:FormItem>
        </mx:Form>
    </s:controlBarContent>
 
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/mx";
 
        #rSl s|Button#track {
            chromeColor: red;
        }
 
        #gSl s|Button#track {
            chromeColor: green;
        }
 
        #bSl s|Button#track {
            chromeColor: blue;
        }
    </fx:Style>
 
    <fx:Script>
        <![CDATA[
            private function setFillColor(r:uint, g:uint, b:uint):void {
                var colour:Number = (r << 16) ^ (g << 8) ^ b;
                solidFill.color = colour;
            }
        ]]>
    </fx:Script>
 
    <s:Rect id="rct"
            left="40" right="40" top="40" bottom="40">
        <s:fill>
            <s:SolidColor id="solidFill" />
        </s:fill>
    </s:Rect>
 
</s:Application>

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/04/23/creating-a-custom-spark-hslider-thumb-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=".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: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="spark.skins.spark.HSliderTrackSkin" />
 
    <!--- The default skin class is HSliderThumbSkin. -->
    <s:Button id="thumb" top="0" bottom="0" 
              skinClass="spark.skins.spark.ButtonSkin"
              label="{hostComponent.value.toString(16).toUpperCase()}"
              width="40" />
</s:SparkSkin>