Number Range
A specialized range input component for selecting numeric values within a specified interval. It provides a dual-input interface for minimum and maximum values, with built-in validation to ensure the range boundaries are valid. Ideal for filtering numeric data, setting price ranges, or defining numeric boundaries. Supports dynamic header display, close functionality, and nested component management. Ideal for creating organized, interactive UI sections with flexible visibility and styling options.
Extends: fieldComponent
Fields
Name | Code | Data Type | Description |
|---|---|---|---|
Minimum Value |
| text | Sets the lower boundary value for the number range |
Maximum Value |
| text | Sets the upper boundary value for the number range |
Decimal Places |
| number | Specifies the number of decimal places to display for range values |
Custom Validation Script |
| text | A custom JavaScript function for additional range validation rules |
Custom Validation Message |
| multi-locale | The error message shown when custom range validation fails (Multi-lingual) |
Unique |
| boolean | Ensures the selected range doesn't duplicate existing ones |
Label |
| multi-locale | Label for the range field |
ID |
| text | Unique identifier for the component |
Style Classes |
| text | CSS classes for styling |
Width |
| text | Controls component width |
Value |
| text | Current range values |
Visible |
| boolean | Controls component visibility |
Enabled |
| boolean | Controls whether component is enabled |
Methods
Name | Description |
|---|---|
| Initializes the field type as 'number' for the range component |
| Calculates and returns the selected numeric range |
| Sets predefined range values if applicable |
Events
Name | Description |
|---|---|
| Triggered when either the minimum or maximum value is modified |
| Triggered when the range input loses focus |
| Triggered when the range input gains focus |