Setting the vertical gap between the track and label in the ProgressBar control in Flex

The following example shows how you can adjust the vertical gap between the track and label in the Flex ProgressBar control by setting the verticalGap style.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/05/05/setting-the-vertical-gap-between-the-track-and-label-in-the-progressbar-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="top"
        backgroundColor="white"
        creationComplete="init();">

    <mx:Script>
        <![CDATA[
            import mx.events.SliderEvent;

            private function init():void {
                slider.value = progressBar.getStyle("verticalGap");
            }

            private function progressBar_change(evt:SliderEvent):void {
                progressBar.setStyle("verticalGap", evt.value);
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="verticalGap:">
                <mx:HSlider id="slider"
                        minimum="0"
                        maximum="20"
                        value="3"
                        liveDragging="true"
                        snapInterval="1"
                        tickInterval="1"
                        change="progressBar_change(event);" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:ProgressBar id="progressBar"
            mode="manual"
            trackColors="[red, red]"
            barColor="green"
            initialize="progressBar.setProgress(76, 100);" />

</mx:Application>

View source is enabled in the following example.