Flex 4 HSlider Tick Marks?

Question

How would one go about doing this. I have a class extending the Spark HSlider and a skin for it, but what kind of Display Object should I used to display the values for Tick Marks..
some code below: I figured DataGroup as a possible repeater component, but nothing shows.  Any help being able repeat a set of Lines with X and Y values would be greatly appreciated.
Thanks,
Skitch
PlayerSlider.as (Component):
import mx.collections.ArrayCollection;
    import spark.components.DataGroup;
    import spark.components.HSlider;
    public class PlayerSlider extends HSlider
        [SkinPart(required="false")]
        public var tickMarks:DataGroup;
        public function PlayerSlider()
            super();
        [Bindable]       
        public function set tickValues(value:ArrayCollection):void
            _tickValues = value;
            _tickValuesChanged = true;
            invalidateProperties();
        public function get tickValues():ArrayCollection { return _tickValues; }
        protected var _tickValues:ArrayCollection;
        protected var _tickValuesChanged:Boolean = false;
         * Adding the prompt text to the label if it's available
        override protected function commitProperties():void
            super.commitProperties();
            if (this._tickValuesChanged)
                if (tickMarks)
                    tickMarks.dataProvider = tickValues;
                this._tickValuesChanged = false;
        override protected function partAdded(partName:String, instance:Object):void
            super.partAdded(partName, instance);
            if (instance == tickMarks)
                tickMarks.dataProvider = tickValues;
PlayerSliderSkin.mxml (SkinClass):
<?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" xmlns:mx="library://ns.adobe.com/flex/mx">
    <fx:Metadata>[HostComponent("com.digitalsmiths.util.playerSlider.PlayerSlider")]</fx:Meta data>
    <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" top="0" bottom="0" minWidth="33" width="100"
              skinClass="styling.skinClasses.sliders.track.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" width="4" height="11"
              skinClass="styling.skinClasses.sliders.thumb.HSliderThumbSkin"/>
    <s:DataGroup id="tickMarks" left="0" right="0" top="0" bottom="0" minWidth="33" width="100">
        <s:layout>
            <s:BasicLayout/>
        </s:layout>
        <s:itemRenderer>
            <fx:Component>
                <s:ItemRenderer>
                    <s:Line
                        height="100%">
                        <s:stroke>
                            <s:SolidColorStroke color="0x525254"/>
                        </s:stroke>
                    </s:Line>
                </s:ItemRenderer>
            </fx:Component>
        </s:itemRenderer>
    </s:DataGroup>
</s:SparkSkin>

Answer 1

These threads might be useful for you:
http://forums.adobe.com/message/2486681#2486681
http://forums.adobe.com/message/2476351#2476351
In CustomSlider4.zip there is a skin file called HSliderTrackSkinTicks.mxml that shows a very simple way of implementing tick marks.  DataGroup should work too, but it will be a little trickier to line up the ticks properly.