Setting the track margin on a Halo Slider control in Flex

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/06/27/setting-the-track-margin-on-a-halo-slider-control-in-flex/ -->
<mx:Application name="HSlider_trackMargin_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="trackMargin:">
                <mx:HSlider id="sl"
                        liveDragging="true"
                        maximum="100" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>
 
    <mx:Canvas backgroundColor="haloSilver">
        <mx:HSlider id="sldr"
                trackMargin="{sl.value}"
                labels="[0,5,10]"
                tickInterval="5" />
    </mx:Canvas>
 
</mx:Application>

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/06/27/setting-the-track-margin-on-a-halo-slider-control-in-flex/ -->
<mx:Application name="HSlider_trackMargin_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
    <mx:Style>
        HSlider {
            trackMargin: 100;
        }
    </mx:Style>
 
    <mx:Canvas backgroundColor="haloSilver">
        <mx:HSlider id="sldr"
                labels="[0,5,10]"
                tickInterval="5" />
    </mx:Canvas>
 
</mx:Application>

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/06/27/setting-the-track-margin-on-a-halo-slider-control-in-flex/ -->
<mx:Application name="HSlider_trackMargin_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
    <mx:Script>
        <![CDATA[
            import mx.events.SliderEvent;
 
            protected function sl_changeHandler(evt:SliderEvent):void {
                sldr.setStyle("trackMargin", evt.value);
            }
        ]]>
    </mx:Script>
 
    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="trackMargin:">
                <mx:HSlider id="sl"
                        liveDragging="true"
                        maximum="100"
                        change="sl_changeHandler(event)"/>
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>
 
    <mx:Canvas backgroundColor="haloSilver">
        <mx:HSlider id="sldr"
                labels="[0,5,10]"
                tickInterval="5" />
    </mx:Canvas>
 
</mx:Application>

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/06/27/setting-the-track-margin-on-a-halo-slider-control-in-flex/ -->
<mx:Application name="HSlider_trackMargin_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        initialize="init();">
 
    <mx:Script>
        <![CDATA[
            import mx.containers.ApplicationControlBar;
            import mx.containers.Canvas;
            import mx.containers.Form;
            import mx.containers.FormItem;
            import mx.controls.HSlider;
            import mx.events.SliderEvent;
 
            protected const appControlBar:ApplicationControlBar = new ApplicationControlBar();
            protected const sldr:HSlider = new HSlider();
 
            protected function init():void {
                const sl:HSlider = new HSlider();
                sl.liveDragging = true;
                sl.maximum = 100;
                sl.addEventListener(SliderEvent.CHANGE, sl_changeHandler);
 
                const formItem:FormItem = new FormItem();
                formItem.label = "trackMargin:";
                formItem.addChild(sl);
 
                const form:Form = new Form();
                form.styleName = "plain";
                form.addChild(formItem);
 
                appControlBar.dock = true;
                appControlBar.addChild(form);
                addChildAt(appControlBar, 0);
 
                sldr.labels = [0, 5, 10];
                sldr.tickInterval = 5;
 
                const can:Canvas = new Canvas();
                can.setStyle("backgroundColor", "haloSilver");
                can.addChild(sldr);
                addChild(can);
            }
 
            protected function sl_changeHandler(evt:SliderEvent):void {
                sldr.setStyle("trackMargin", evt.value);
            }
        ]]>
    </mx:Script>
 
</mx:Application>