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.

2 thoughts on “Setting the step size on a NumericStepper control in Flex

  1. Hi,

    try this,

    set NumericStepper value to 12

    then click slider to trigger focus out on NumericStepper,

    why value change to 10.

    this behaviour annoying to me, please help how to fix this.

    thanks

Comments are closed.