Multi Range (Pro feature)
With the Multi Range element, you can give different ranges independently for the left and right sides.
Element Tab
The Multi Range element contains the following attributes in the Element tab:
Element Name - Title of the element
Description - brief description of the field that will be displayed with the element name.
Element width - set the width of the field relative to the width of the calculator in 100% scale. You will see the changes in real time.
Min Value - the minimum value that the Basic Slider Button can take
Max Value - the maximum value that the Basic Slider Button can take
Default Left Value – (aka Start Value) the initial lower bound of the slider range that is pre-selected when the slider loads.
Default Right Value – (aka End Value) the initial upper bound of the slider range that is pre-selected when the slider loads.
Unit Name - here you can put unit measures, such as kg(kilograms), gr(grams), m (meters), etc. There is also an option to choose the alignment of the units against the value.
Range Step - shows the step to grow the range. The field will be disabled if the Jump between scale points setting is enabled or the Input slider style is selected.
Slider Scale Points - specify the exact data points to emphasize on the slider. Enter multiple values separated by commas, using dots for decimal numbers. Example: 7.5, 10, 13.5
Jump Between Scale Points - when enabled, the slider will lock to the specified scale points, ensuring users can only select predefined values in Slider Scale Points and not anything in between.
Measurement Unit
This section of the Element tab helps to adjust the measurement unit applied to the field and the symbol displayed with the field value:
Use Currency Sign - mainly used to accept fractional inputs and applies the currency settings defined in the Calculator Settings. The setting will be disabled automatically if Set Measurement Unit is enabled.
Unit Symbol - enter the unit symbol
Position - select the position where the symbol should be displayed relative to the number
Thousands separator - select the symbol to separate thousands
Number of decimals - indicate the number of decimals in the fractional part
Decimal separator - select the symbol to separate the fractional part
Replace Subtotal with Multiplied Value – when enabled, this option replaces the original subtotal with the calculated value from the multiplication. Useful for pricing scenarios based on custom measurements.
Variants
Under this tab, you can select the suitable slider range style according to your needs:
Here are the available styles:
Settings Tab
The Multi Range element contains the following attributes in the Settings tab:
Round Value - Enable if you want to round the value to the whole number in the total summary
Hidden by Default - The element will be hidden by default. You can make it visible using a conditional system.
Calculate hidden by default - If any case hides the element via the Hidden by Default setting or hidden by some condition, the element's default value (if it is set) will be counted in the formula
Show in Grand Total - Disable if you want to hide the element in Grand Total.
Required - Defines whether the element will be required to fill in or not.
Additional Classes - Add extra classes to the HTML elements to further style changes.
Example of Using Multi Range Element
Now let’s build a property viewing calculator for a real estate agency. The calculator will have the fields to choose the district, type, extra features(number of rooms, benefits), and the date to look at the property. There will be a Multi-Range field for users to define the range of the price.
Pay attention to the Max Value, Default Left Value & Default Right Value. The Default Left Value cannot be higher than the Max Value.
This is how it will look on the user’s page:
You can set up Multiply (cost per value) when you want the value a user inputs to multiply for the cost. For example, if a book cafe wants to offer quarterly packages based on the number of books. The values will multiply by 1.5 to calculate quarterly subscriptions.
That is how the user will see the calculator:
Last updated
Was this helpful?