How to use the NumericStepper component
The NumericStepper component allow a user to select a numeric value in a specific range. The value may be changed by pressing the increment or decrement buttons, or by typing a value into a text input.
NumericStepper componentThe Basics
First, let's create a NumericStepper control, set up its range of values, and add it to the the display list.
var stepper = new NumericStepper();
stepper.minimum = 0.0;
stepper.maximum = 100.0;
stepper.value = 50.0;
this.addChild(stepper);
The value property indicates the current value of the stepper, while the minimum and maximum properties establish a range of possible values. We can further control the stepper's behavior with the step property:
stepper.step = 1;
The step property controls how the numeric stepper's value is rounded as the user interacts with it. If we set the stepper's step to 1.0, as we do above, the stepper will increment on whole numbers only, and it cannot have a value like 4.5, for instance.
Add a listener to the Event.CHANGE event to know when the value property changes:
stepper.addEventListener(Event.CHANGE, stepper_changeHandler);
The listener might look something like this:
function stepper_changeHandler(event:Event):Void {
var stepper = cast(event.currentTarget, NumericStepper);
trace("stepper.value change: " + stepper.value);
}
Styles
A number of styles may be customized on the sub-components of a NumericStepper component, including styles on the decrement and increment buttons and the text input.
Decrement and increment buttons
The decrement and increment buttons in a NumericStepper component are of type Button. Their appearance may be customized globally in a theme, or they may be customized outside of a theme on an specific, individual NumericStepper.
See How to use the
Buttoncomponent for complete details about which styles are available for the button.
Style the decement and increment buttons globally
Use the NumericStepper.CHILD_VARIANT_DECREMENT_BUTTON and NumericStepper.CHILD_VARIANT_INCREMENT_BUTTON constants in a theme to provide a function that globally styles the buttons in all NumericStepper components.
styleProvider.setStyleFunction(
Button,
NumericStepper.CHILD_VARIANT_DECREMENT_BUTTON,
setNumericStepper_DecrementButton_Styles);
styleProvider.setStyleFunction(
Button,
NumericStepper.CHILD_VARIANT_INCREMENT_BUTTON,
setNumericStepper_IncrementButton_Styles);
The functions should use the following signature.
function setNumericStepper_DecrementButton_Styles(button:Button):Void {
// ... set styles here
});
function setNumericStepper_IncrementButton_Styles(button:Button):Void {
// ... set styles here
});
Style the decrement and increment buttons in a specific NumericStepper
The decrementButtonFactory and incrementButtonFactory properties may be used to customize the creation of an individual button.
stepper.decrementButtonFactory = () -> {
var button = new Button();
// ... set styles here
return button;
};
stepper.incrementButtonFactory = () -> {
var button = new Button();
// ... set styles here
return button;
};
TextInput
The text input in a NumericStepper component is of type TextInput. Its appearance may be customized globally in a theme, or it may be customized outside of a theme on an specific, individual NumericStepper.
See How to use the
TextInputcomponent for complete details about which styles are available for the text input.
Style text input globally
Use the NumericStepper.CHILD_VARIANT_TEXT_INPUT constant in a theme to provide a function that globally styles the text inputs in all NumericStepper components.
styleProvider.setStyleFunction(
TextInput,
NumericStepper.CHILD_VARIANT_TEXT_INPUT,
setNumericStepper_TextInput_Styles);
The function should use the following signature.
function setNumericStepper_TextInput_Styles(textInput:TextInput):Void {
// ... set styles here
});
Style the text input in a specific NumericStepper
The textInputFactory property may be used to customize the creation of an individual text input.
stepper.textInputFactory = () -> {
var textInput = new TextInput();
// ... set styles here
return textInput;
};