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.

2 thoughts on “Setting the vertical gap between the track and label in the ProgressBar control in Flex

  1. Did you can provide an example concerning to include several HSlider components inside a DataGrid. My main aim is build a Datagrid for evaluation my students. The first column is filled with the students name and in the second I would like to insert the exam scores using a HSlider. The datagrid should be similar to that:

    Student_Name Score
    Anne ——v—-
    John —v——-
    Amilcar ———v-

    and so on…..

    In this way I can perform efficient and visual comparations between my students.

    thanks a lot.

Comments are closed.