> For the complete documentation index, see [llms.txt](https://docs.stylemixthemes.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.stylemixthemes.com/cost-calculator-builder/calculator-elements/multi-range.md).

# 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:

<figure><img src="/files/ym4SYWp4ec5vxHegmxh6" alt=""><figcaption></figcaption></figure>

* **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** ](#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*
* **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.

<figure><img src="/files/8YDLcxVMVYwZmDG78M08" alt=""><figcaption><p><strong>Jump Between Scale Points</strong></p></figcaption></figure>

### 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:

<figure><img src="/files/gLdT9OHWdrKdu3uNK03c" alt=""><figcaption></figcaption></figure>

* **Use Currency Sign** - mainly used to accept fractional inputs and applies the currency settings defined in the [Calculator Settings](/cost-calculator-builder/cost-calculator-settings/calculator-settings/currency.md). The setting will be disabled automatically if **Set Measurement Unit** is enabled.
* **Unit Symbol** - enter the unit symbol&#x20;
* **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
* **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:

<figure><img src="/files/Wvc2f0tosrU7yKrWqXZR" alt=""><figcaption></figcaption></figure>

Here are the available styles:

{% tabs %}
{% tab title="Default" %}

<figure><img src="/files/4ZlOMXNnsCrkQSfr3WYS" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Small" %}

<figure><img src="/files/KtKhigWtF3QnOjsmhReM" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Multi Point" %}

<figure><img src="/files/zZvw70svUGsyy7qLeT8d" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Flat Minimal" %}

<figure><img src="/files/OnhCpHlNct6AdmOB2bNd" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Modern" %}

<figure><img src="/files/5YQAA9yr4qzy3CMskWMV" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Input" %}

<figure><img src="/files/XbkptU28ZCjqZ7cPeYQ4" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

## Settings Tab

The Multi Range element contains the following attributes in the Settings tab:

<figure><img src="/files/NPpYEe8v8QRG3ul2brfI" alt=""><figcaption></figcaption></figure>

* **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**](https://docs.stylemixthemes.com/cost-calculator-builder/calculator-elements/pages/OneKKwO4j2k65VfBcrvD#id-1.-hidden-by-default).
* **Calculate hidden by default** - If any case hides the element via the **Hidden by Default** setting or  hidden by some [**condition**](/cost-calculator-builder/conditional-system/introduction.md), the element's default value (if it is set) will be counted in the formula&#x20;
* **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](/cost-calculator-builder/plugin-features/additional-classes.md) 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.

{% hint style="info" %}
Pay attention to the **Max Value**, **Default Left Value & Default Right Value**. The **Default Left Value** cannot be higher than the **Max Value.**
{% endhint %}

<figure><img src="/files/mGZN8cKuVHwSWW1PQRKB" alt=""><figcaption></figcaption></figure>

This is how it will look on the user’s page:

<figure><img src="/files/u5y9wmKWUKdtriIxXgxE" alt=""><figcaption></figcaption></figure>

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.

<figure><img src="/files/yNM1jscF8ehrV1pETxz3" alt=""><figcaption></figcaption></figure>

That is how the user will see the calculator:

<figure><img src="/files/LfHYEjLEI0rKJixrAhMB" alt=""><figcaption></figcaption></figure>

[^1]: r.g 7, 000, 000 (seven millions)


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.stylemixthemes.com/cost-calculator-builder/calculator-elements/multi-range.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.