Setting the step size on a NumericStepper control in Flex

The following code shows how you can adjust the step size on a Flex NumericStepper control by setting the stepSize property.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/05/16/setting-the-step-size-on-a-numericstepper-control-in-flex/ -->
<mx:Application 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="stepSize:">
                <mx:HSlider id="slider"
                        minimum="1"
                        maximum="10"
                        value="1"
                        snapInterval="1"
                        tickInterval="1"
                        liveDragging="true" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:NumericStepper id="numericStepper"
            minimum="0"
            maximum="100"
            stepSize="{slider.value}" />

</mx:Application>

View source is enabled in the following example.

And due to popular demand, here is the “same” application, written in ActionScript:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/05/16/setting-the-step-size-on-a-numericstepper-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        xmlns:comps="comps.*"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <comps:MyComp id="myComp" />

</mx:Application>

comps/MyComp.as

/**
 * http://blog.flexexamples.com/2008/05/16/setting-the-step-size-on-a-numericstepper-control-in-flex/
 */
package comps {
    import mx.containers.ApplicationControlBar;
    import mx.containers.Canvas;
    import mx.containers.Form;
    import mx.containers.FormItem;
    import mx.controls.HSlider;
    import mx.controls.NumericStepper;
    import mx.core.Application;
    import mx.events.SliderEvent;

    public class MyComp extends Canvas {
        public var appControlBar:ApplicationControlBar;
        public var form:Form;
        public var formItem:FormItem;
        public var slider:HSlider;
        public var numericStepper:NumericStepper;

        public function MyComp() {
            super();
            init();
        }

        public function init():void {
            slider = new HSlider();
            slider.minimum = 1;
            slider.maximum = 10;
            slider.value = 1;
            slider.snapInterval = 1;
            slider.tickInterval = 1;
            slider.liveDragging = true;
            slider.addEventListener(SliderEvent.CHANGE, slider_change);

            formItem = new FormItem();
            formItem.label = "stepSize:";
            formItem.addChild(slider);

            form = new Form();
            form.styleName = "plain";
            form.addChild(formItem);

            appControlBar = new ApplicationControlBar();
            appControlBar.dock = true;
            appControlBar.addChild(form);

            Application.application.addChildAt(appControlBar, 0);

            numericStepper = new NumericStepper();
            numericStepper.minimum = 0;
            numericStepper.maximum = 100;
            addChild(numericStepper);
        }

        private function slider_change(evt:SliderEvent):void {
            numericStepper.stepSize = evt.value;
        }
    }
}

View source is enabled in the following example.