# 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:
* **Name** - Title of the element
* **Description** - Description of the element
* **Minimum Range Value** - minimum value that the multi-range slider can take
* **Maximum Range Value** - maximum value that the multi-range slider can take
* **Default Start Value** – the initial lower bound of the slider range that is pre-selected when the slider loads.
* **Default End Value** – the initial upper bound of the slider range that is pre-selected when the slider loads.
* **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** ](#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 decima**l numbers. *Example: 7.5, 10, 13.5*
* **Name of Value** - 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.
* **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.
Jump Between Scale Points
* **Multiply by Unit Price** – enables the use of a unit price multiplier. When toggled on, the final value will be calculated by multiplying the selected value by the specified unit price.
* **Unit Price** – the cost per unit of the selected value. This numeric field supports decimal values and defines how much each unit contributes to the total.
* **Unit** – a label indicating the measurement unit used for the selected value (such as centimeters, meters, or inches).
* **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.
## Styles
Under this tab, you can select the suitable slider range style according to your needs:
Here are the available styles:
{% tabs %}
{% tab title="Default" %}
{% endtab %}
{% tab title="Small" %}
{% endtab %}
{% tab title="Multi Point" %}
{% endtab %}
{% tab title="Flat Minimal" %}
{% endtab %}
{% tab title="Modern" %}
{% endtab %}
{% tab title="Input" %}
{% endtab %}
{% endtabs %}
## Settings Tab
The Multi Range element contains the following attributes in the Settings tab:
* **Currency Sign**- any sign for the range of this element
* **Hidden by Default** - The element will be hidden until a corresponding condition is met
* **Calculate hidden by default** - If any case hides the element via the **Hidden by Default** setting or hidden by some [**condition**](https://docs.stylemixthemes.com/cost-calculator-builder/conditional-system), the element's default value (if it is set) will be counted in the formula
* **Round Value** - The value will be rounded
* **Show in Grand Total** - Disable if you want to hide the element in Grand Total.
* **Additional Classes** - Add extra classes to the HTML elements to make further style changes
### Add a measuring Unit
This setting allows you to add a measuring unit (Ω, cm, kg, inch, etc.) to the field.
Add a measuring unit
* **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 ](#user-content-fn-1)[^1]
* **Number of decimals** - indicate the number of decimals in the fractional part
* **Decimal separator** - select the symbol to separate the fractional part
## 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.
{% hint style="info" %}
Pay attention to the **Maximum Range Value** and **Default Start Value & Default End Value**. The **Default Start Value** cannot be higher than the **Maximum Range Value.**
{% endhint %}
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:
[^1]: r.g 7, 000, 000 (seven millions)
%20(1).gif?alt=media&token=72c16894-530a-4eeb-a4c2-67df19afe202)
