     {
         super.layoutContents(unscaledWidth, unscaledHeight);
         
-        // calculate skin dimensions
-        var calculatedSkinWidth:Number = Math.max(unscaledWidth, getElementPreferredWidth(thumb));
-        var calculatedSkinHeight:Number = Math.max(unscaledHeight, getElementPreferredHeight(thumb));
-        
-        layoutSlidingContent(calculatedSkinWidth, calculatedSkinHeight);
-        layoutTrack(calculatedSkinWidth, calculatedSkinHeight);
-        layoutThumb(calculatedSkinWidth, calculatedSkinHeight);
-        layoutMask(calculatedSkinWidth, calculatedSkinHeight);
+        // calculate skin dimensions - outer stroke
+        var calculatedContentWidth:Number = Math.max(unscaledWidth - 2 * layoutOuterStrokeWeight, 
+            getElementPreferredWidth(thumb));
+        var calculatedContentHeight:Number = Math.max(unscaledHeight - 2 * layoutOuterStrokeWeight, 
+            getElementPreferredHeight(thumb));
+
+		setElementSize(contents, calculatedContentWidth, layoutThumbHeight);
+		setElementPosition(contents, layoutOuterStrokeWeight, 
+            layoutOuterStrokeWeight + (calculatedContentHeight - layoutThumbHeight) / 2);
+        
+        layoutTrack(calculatedContentWidth, layoutThumbHeight);
+        // Sliding content must be positioned after the track has been sized
+        layoutSlidingContent(calculatedContentWidth, layoutThumbHeight);
+        layoutThumb(calculatedContentWidth, layoutThumbHeight);
+        layoutMask(calculatedContentWidth, layoutThumbHeight);
     }
     
     /**

     */
    private function drawSlidingContent(skinWidth:Number, skinHeight:Number):void 
    {
        slidingContent.graphics.clear();
        
        // selected side of the sliding content
        slidingContent.graphics.beginFill(getStyle("accentColor"));
        slidingContent.graphics.drawRect(layoutThumbWidth - skinWidth, 0, skinWidth - layoutThumbWidth / 2, 
            layoutThumbHeight);
        slidingContent.graphics.endFill();
        
        // unselected side of the sliding content
        slidingContent.graphics.beginFill(ColorUtil.adjustBrightness2(getStyle("chromeColor"), -25));
        slidingContent.graphics.drawRect(layoutThumbWidth / 2, 0, skinWidth - layoutThumbWidth / 2, 
            layoutThumbHeight);
        slidingContent.graphics.endFill();
        
        // clear the thumb area
        slidingContent.graphics.beginFill(getStyle("chromeColor"));
        slidingContent.graphics.drawRoundRect(0, 0, layoutThumbWidth, layoutThumbHeight, 
            layoutCornerRadius * 2);
        slidingContent.graphics.endFill();
    }
    
    /**

                layoutThumbWidth = 47;
                layoutThumbHeight = 28;
                layoutStrokeWeight = 1;
                layoutOuterStrokeWeight = 1;
                layoutTextShadowOffset = -1;
                layoutInnerPadding = 7;
                layoutOuterPadding = 11;
