The Range Filter is a powerful tool empowering users to refine displayed data within specific value ranges. With intuitive left and right handles, users effortlessly adjust lower and upper limits, enhancing precision, or can use the keyboard to adjust the range when the filter is active.
The Range Filter proves invaluable in various scenarios. For instance, in HR applications, it efficiently filters employees by age, enabling HR professionals to focus on specific age groups for targeted analysis. Furthermore, in financial systems, users can leverage the Range Filter to narrow down salary data, refining insights into compensation structures. This dynamic control enhances user experience by offering a tailored approach to data visualization, catering to diverse needs across different applications.
Add Range Filter to the form
Firstly, find the Range Filter control in the controls add panel. Then, drag and drop it into a section or container on your form.
Basic of the Range Filter
Open the Content > Basic block and set the Title's text of this Multiple Metadata control.
For more information about Title for field control, please refer:
Set the Associated variable for this Search Filter control. When you add a new Range Filter control, a default variable will be generated automatically. You can click the Edit Button to change the name, or click the Reset button to bind this Range control to other existing variables.
Then, in the Apply type section. Choose on typing or click on apply button. For more details on Apply types, refer to:
Data of Range Filter
Open the Content > Data block to set the Max/Min of data and layout of this Range Filter control.
Get min/max dynamically: Turn this ON will make this field control show different Max/Min based on the data source. In the Application section, select the application which is the current application by default.
Afterward, move on to the List section. Select the data list under the selected application.
In the Data Filters section, click the condition button to filter the data from the selected data list.
In the Value Field, select the desired filter variables from the list. The Step is used to set the numerical interval for the filter.
Turnoff the Get min/max dynamically, Max value and Min value can be set the maximum and minimum value of the range filter respectively.
Appearance of the Search Filter
Open the Content > Appearance block to set the appearance and layout of this Search Filter control.
Input enabled: Turn this ON will enable keyboard set customized upper and lower image.
Value prefix: Can add a fixed prefix before data.
Value suffix: Can add a fixed suffix before data.
Thousands Seperator: can set grouping separator of data.
Rounded to: can set decimal places.
Display Title: Choose display or hide the label of this control. For more information, please refer: Understand the label of field controls
Validation of Search filter
Open the Content > Validation block to set the properties of this Search filter control.
Readonly: Turn this ON will make this field control as view only status.
Custom Validation: Set the custom validation rules. An error message that will display under your field when specified conditions become true. It will allow you to add any number of rules for validating your field.
Action call of the Search Filter field
Open the Content > Action block to call a pre-defined action from the drop-down list. This action will be triggered once the value of this image field is changed.
Style the Search Filter
Slider
Open the Style > Slider block to set the styles of the field control for it's editable status.
1. Sliding height: Set the thickness of the line of the control.
2. Default/Range: Set different style for default state and range state of the range filter. Styles below are supported to be set separately for default and focus state.
Color: Choose the color of the dropdown list items text.
Border Type: Select the type of border, choosing from none, solid, double, dotted, dashed, or grooved.
Radius: Set the border radius to control corner roundness.
3. Range points
Points width: Set the width of range points of the control.
Points height: Set the height of range points of the control.
Background Color: Set the background color of range points. By default, the background color is set as transparent.
Border Type: Select the type of border, choosing from none, solid, double, dotted, dashed, or grooved.
Radius: Set the border radius to control corner roundness.
Shadow: Set the shadow of the field.
Inputs
Open the Style > Inputs block to set the styles of the field control for it's editable status. This block will only show up when inputs a enabled in Content>Appearance.
Inputs: Set the style of the whole values
Container width: Set width of input containers
Horizontal offset: Set the horizontal spacing between two input containers.
Margin: Set the Margin of the Inputs
Alignment: Set the Alignment of the Inputs
Input
Typography: Set the typography options for the text in the Search Filter
Color: Choose the color of the field's text.
Background Color: Set background color of the field. By default, the background color is set as transparent.
Border Type: Select the type of border, choosing from none, solid, double, dotted, dashed, or grooved.
Width: Set the width of input borders
Color: Choose the color of the input borders
Radius: Set the border radius to control corner roundness.
Shadow: Set the shadow of this control.
Values
Typography: Set the typography options for the text in the Search Filter.
Color: Choose the color of the field's text.
Margin: Set the Margin of the values
Alignment: Set the Alignment of the values
Style of title
Set the Title of field controls that are applicable to this control.
Advanced Settings
Set the Advanced Settings Tab that are applicable to this control.