Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/02/08/setting-the-track-color-of-a-flex-progressbar-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            private function progressBar_initialize():void {
                progressBar.setProgress(76, 100);
            }
        ]]>
    </mx:Script>

    <mx:ProgressBar id="progressBar"
            mode="manual"
            labelPlacement="center"
            fontSize="48"
            barColor="haloBlue"
            trackColors="[white, haloSilver]"
            trackHeight="64"
            width="100%"
            initialize="progressBar_initialize();" />

</mx:Application>

View source is enabled in the following example.

You can also set the ProgressBar control’s trackColors style in an external .CSS file or an <mx:Style /> block, as seen in the following snippet:

<mx:Style>
    ProgressBar {
        barColor: haloBlue;
        trackColors: white, haloSilver;
        trackHeight: 64;
    }
</mx:Style>

Or, you can set the trackColors style using ActionScript, as seen in the following snippet:

<mx:Script>
    <![CDATA[
        private function progressBar_initialize():void {
            progressBar.setProgress(76, 100);
            // Set styles...
            progressBar.setStyle("barColor", "haloBlue");
            progressBar.setStyle("trackColors", ["white", "haloSilver"]);
            progressBar.setStyle("trackHeight", 64);
        }
    ]]>
</mx:Script>

If you want the ProgressBar control’s track to have a solid fill, set both colors the trackColors style to the same value, as seen in the following snippet:

<mx:Style>
    ProgressBar {
        barColor: haloBlue;
        trackColors: black, black;
        trackHeight: 64;
    }
</mx:Style>

 

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/09/10/changing-the-track-height-of-a-flex-progressbar-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

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

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

    <mx:XML id="labelPlacementXML">
        <items>
            <item>
                <label>ProgressBarLabelPlacement.BOTTOM</label>
                <data>{ProgressBarLabelPlacement.BOTTOM}</data>
            </item>
            <item>
                <label>ProgressBarLabelPlacement.CENTER</label>
                <data>{ProgressBarLabelPlacement.CENTER}</data>
            </item>
            <item>
                <label>ProgressBarLabelPlacement.TOP</label>
                <data>{ProgressBarLabelPlacement.TOP}</data>
            </item>
            <item>
                <label>ProgressBarLabelPlacement.LEFT</label>
                <data>{ProgressBarLabelPlacement.LEFT}</data>
            </item>
            <item>
                <label>ProgressBarLabelPlacement.RIGHT</label>
                <data>{ProgressBarLabelPlacement.RIGHT}</data>
            </item>
        </items>
    </mx:XML>

    <mx:ApplicationControlBar dock="true">
        <mx:Label text="trackHeight:" />
        <mx:HSlider id="slider"
                minimum="0"
                maximum="32"
                value="{NaN}"
                liveDragging="true"
                snapInterval="1"
                tickInterval="4"
                dataTipPrecision="0"
                width="100"
                change="slider_change(event);" />

        <mx:Spacer width="100%" />

        <mx:Label text="labelPlacement:" />
        <mx:ComboBox id="comboBox"
                dataProvider="{labelPlacementXML.item}" />
    </mx:ApplicationControlBar>

    <mx:ProgressBar id="progressBar"
            mode="manual"
            labelPlacement="{comboBox.selectedItem.data}"
            creationComplete="progressBar.setProgress(35, 100);" />

</mx:Application>

View source is enabled in the following example.