[flexcoders] hSlider Thumb Skin positions incorrectly

[stldvd]

Hi All,

I'm trying to skin the thumb of an hSlider component. Problems: 
1) the thumb is resized to be pixelated and grainy. 
2) Its position is incorrect. Instead of the new button being cleanly bisected 
by the track, it is just below the track, tangential to it. And (presumably 
because its registration point is at upper left) when I slide it all the way to 
the right, it goes  off the end of the track until its left edge is at the 
track's right edge. This also messes up calculations for the hSlider.value 
property. Here's code for the entire test project:
//HSliderTest.mxml:
<?xml version="1.0" encoding="utf-8"?>
<s:ViewNavigatorApplication xmlns:fx="http://ns.adobe.com/mxml/2009"; 
                                                        
xmlns:s="library://ns.adobe.com/flex/spark" 
firstView="views.HSliderTestHomeView" applicationDPI="160">
        <fx:Declarations>
                <!-- Place non-visual elements (e.g., services, value objects) 
here -->
        </fx:Declarations>
</s:ViewNavigatorApplication>

//SliderSkin.mxml. Only modified the <s:Button tag at the end:
<?xml version="1.0" encoding="utf-8"?>
<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("spark.components.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"];

        /**
         * @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#track
            @see spark.skins.spark.HSliderTrackSkin -->
    <s:Button id="track" left="0" right="0" width="11" height="11"
              tabEnabled="false"
              skinClass="spark.skins.spark.HSliderTrackSkin" />
              
    <!--- 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" height="11" width="11" 
tabEnabled="false" skinClass="skins.SliderThumbSkin" />
</s:SparkSkin>

//SliderThumbSkin.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:SparkButtonSkin 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="21"
                                   minHeight="21"
                                   alpha.disabled="0.5">
        
        <fx:Metadata>
                <![CDATA[ 
                /** 
                * @copy spark.skins.spark.ApplicationSkin#hostComponent
                */
                [HostComponent("spark.components.Button")]
                ]]>
        </fx:Metadata>

        <!-- states -->
        <s:states>
                <s:State name="up" />
                <s:State name="over" />
                <s:State name="down" />
                <s:State name="disabled" />
        </s:states>
        <s:Image source.up="assets/PurpleOnlyCircle60x60.png"
                         source.over="assets/PurpleOnlyCircle60x60.png"
                         source.down="assets/PurpleOnlyCircle60x60.png"
                         source.disabled="assets/PurpleOnlyCircle60x60.png"
                         width="60"
                          height="60"/> 
</s:SparkButtonSkin>

Can anyone can see why this doesn't display correctly? 

Thanks!