Styling the data tip on a Spark HSlider control in Flex 4

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/05/18/styling-the-data-tip-on-a-spark-hslider-control-in-flex-gumbo/ -->
<s:Application name="Spark_HSlider_skinClass_dataTip_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo">
 
    <s:HSlider id="slider"
            skinClass="skins.CustomHSliderSkin"
            horizontalCenter="0"
            verticalCenter="0" />
 
</s:Application>

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/05/18/styling-the-data-tip-on-a-spark-hslider-control-in-flex-gumbo/ -->
<s:SparkSkin name="CustomHSliderSkin"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        minHeight="11" alpha.disabled="0.5">
    <s:states>
        <s:State name="normal" />
        <s:State name="disabled" />
    </s:states>
 
    <fx:Metadata>
    <![CDATA[
        [HostComponent("spark.components.HSlider")]
    ]]>
    </fx:Metadata>
 
    <fx:Script>
        /* 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 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>
        <!--- Defines the appearance of the the Slider's DataTip. 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="haloBlue" 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="black" fontSize="16" />
            </s:DataRenderer>
        </fx:Component>
    </fx:Declarations>
 
    <!--- Defines the skin class for the HSliderSkin's track. The default skin class is HSliderTrackSkin. -->
    <s:Button id="track"
            skinClass="spark.skins.spark.HSliderTrackSkin"
            left="0" right="0" top="0" bottom="0"
            minWidth="33" width="100" />
 
    <!--- Defines the skin class for the HSliderSkin's thumb. The default skin class is HSliderThumbSkin. -->
    <s:Button id="thumb"
            skinClass="spark.skins.spark.HSliderThumbSkin"
            top="0" bottom="0"
            width="11" height="11" />
 
</s:SparkSkin>