Range Stepper
This component is used to take a range as an input from the users.

Usage
Here are the steps to set the component in Quantum Visualizer:
- Open the Temenos DigitalOrigination project in Quantum Visualizer.
- Drag and drop a Flex Container widget onto the required form.
- Select the Flex Container and set the following properties:
- height: "preferred"
- Insert the component in the Flex Container.
APIs

Sets data to the component
Parameters:
data (object) - mandatory
This contains the following keys:
- valueArray (array) - mandatory
values that the user can choose by pressing + or - buttons - fromIndex (int) - optional
- toIndex (int) - optional
- enableSameValues (boolean) - optional
flag to allow or deny the component to select same values for both “from” and “to”. Defaults to false.
Example:
var data = { "enableSameValues": false, "valueArray": ["3 Months", "6 Months", "1 Year", "2 Years", "3 Years", "4 Years", "5 Years", "6 Years"], }; this.view.rangeStepper.setData(data);

Validates the data and returns the data that is set and selected by the user. It returns data in JSON format and contains the following keys:
- fromIndex
- fromValue
- toIndex
- toValue
- valueArray
- enableSameValues
- isValid
getData API also does the validation while getting data and throws error. If validation is not required then please check getDataWithoutValidation API
Example:
var data = this.view.rangeStepper.getData();

Returns data that is set and selected by the user without any validation. It returns data in JSON format and contains the following keys
- fromIndex
- fromValue
- toIndex
- toValue
- valueArray
- enableSameValues
Example:
var data = this.view.rangeStepper.getDataWithoutValidation();

Validates the range selected by user and returns boolean value
Example:
var isRangeValid = this.view.rangeStepper.validateRange();

Displays error message at the top of the component
Parameters:
msg (String) - mandatory
msg is the error message to be displayed
Example:
var msg = "FROM value cannot be greater than TO value"; this.view.rangeStepper.showError(msg);

Hides error message at the top of the component
Parameters:
msg (String) - mandatory
msg is the error message to be displayed
Example:
this.view.rangeStepper.hideError(msg);

Clears the range selection and sets default values
Example:
this.view.rangeStepper.clear();
In this topic