<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"

                layout="vertical"

                verticalAlign="middle"

                backgroundColor="white">

    <mx:Style>

        ButtonBar {

            buttonStyleName: myCustomButtonStyleName;

            color: #999999;

        }

        .myCustomButtonStyleName {

            skin: Embed(source="assets/ButtonBarSkins.swf",

                symbol="ButtonBarButton_skin");

        }

    </mx:Style>

    <mx:Script>

        <![CDATA[

            import mx.events.SliderEvent;

            private function slider_change(evt:SliderEvent):void {

                buttonBar.setStyle("buttonHeight", evt.value);

            }

        ]]>

    </mx:Script>

    <mx:Array id="arr">

        <mx:Object label="Button" />

        <mx:Object label="ButtonBar" />

        <mx:Object label="ColorPicker" />

        <mx:Object label="ComboBox" />

    </mx:Array>

    <mx:ApplicationControlBar dock="true">

        <mx:Form styleName="plain">

            <mx:FormItem label="buttonHeight:">

                <mx:HSlider id="slider"

                            minimum="24"

                            maximum="64"

                            snapInterval="1"

                            tickInterval="4"

                            liveDragging="true"

                            change="slider_change(event);" />

            </mx:FormItem>

        </mx:Form>

    </mx:ApplicationControlBar>

    <mx:ButtonBar id="buttonBar"  dataProvider="{arr}"  />

</mx:Application>