# Basic Slider The **Basic Slider** element allows you to add a Basic Slider with start and end values. ## Element Tab The **Basic Slider** element has the following attributes in the Element tab:

* **Name** - Title of the element * **Description** - Description of the element * **Minimum Range Value** - minimum value that the Basic Slider Button can take * **Maximum Range Value** - maximum value that the Basic Slider Button can take * **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. * **Default Range Value - t**he initial range value is automatically set for this field before user input or changes. * **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.

* **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. * **Pricing Structure** - The **Pricing Structure** setting defines **how the Cost Calculator calculates the final value** of the field based on the quantity selected by the user. [**Learn More.**](#pricing-structure) ## 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 Basic Slider element contains the following attributes in the Settings tab:

* **Currency Sign** - Enable if you want to show the currency symbol in the total summary * **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. * **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 * **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 make further style changes ### Add a measuring Unit This setting allows you to add a measuring unit (Ω, cm, kg, inch, etc.) to the field.

* **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 ## Pricing Structure :star:**Premium Feature** The **Pricing Structure** setting defines **how the Cost Calculator calculates the final value** of the field based on the quantity selected by the user. It allows you to override the field value before it is passed to the [formula ](https://docs.stylemixthemes.com/cost-calculator-builder/calculator-elements/total)field. This is especially useful for applying quantity-based discounts or custom pricing logic. {% hint style="success" %} Pricing structure is available in [**Quantity**](https://docs.stylemixthemes.com/cost-calculator-builder/calculator-elements/quantity) and [**Basic** **Slider**](https://docs.stylemixthemes.com/cost-calculator-builder/calculator-elements/range-button) Elements. {% endhint %} Pricing Structure has 4 different options:


Default	#default-pricing
All Units Pricing	#all-units-pricing
Tiered Pricing	#tiered-pricing
Flat Unit Price per Range	#flat-unit-price-per-range

By default, the calculator uses the [**Default** ](#default-pricing-structure)pricing structure. It just passes the entered value by the user to the formula field without changes. {% hint style="warning" %} Pricing Structure is not available when the [**Multiply by Unit Price**](#settings-tab) setting is on. {% endhint %} When you select **All Units Pricing**, **Tiered Pricing**, or **Flat Unit Price per Range**, the calculator opens additional pricing settings, allowing you to configure pricing ranges and display a discount badge:

Before looking at each pricing structure, let's understand the common settings of them:

* **Pricing Structure** - choose one of the available pricing structure options. * **Pricing Range Table** - on this table, you can define the range and unit price for the inputs. The range always starts from the [minimum ](#element-tab)value of the element that you set, and ends with the [maximum ](#element-tab)value of the element. You can add new ranges by clicking the Add another range button, and delete the last range by clicking the icon next to it. * **Badge Text** - here you can define the label that will be displayed in the discount badge that will be displayed along with the field. * **Format** - choose one of the available formats to display the discount badge on the element. There are three options: * `%` - displays the discounted amount as a percentage * `$` - displays the discounted amount in currency * `$ + %` - displays the discounted amount in currency and a percentage * **Variants** - choose the discounted badge style. Here you can see the different badges and how they look with sample examples: {% tabs %} {% tab title="% and Outlined" %}

{% endtab %} {% tab title="$ and Primary" %}

{% endtab %} {% tab title="$ + % and Solid " %}

{% endtab %} {% endtabs %} Before going deep to learn about each structure, here is a quick summary of them:

Pricing Range used in the table examples

* From 0 to 10 with a unit price of 17 * From 11 to 100 with a unit price of 14 * From 101 to 200 with a unit price of 12 * From 201 to 250 with a unit price of 10

| Pricing Structure | Explanation | Input: 8 | Input: 57 | Input: 221 | | ----------------------------------------------------------- | ----------------------------------------------------------------------- | ------------ | ----------------------- | --------------------------------------------- | | [**Default Pricing**](#default-pricing) | Passes the entered value directly to the formula without modification | 8 | 57 | 221 | | [**All Units Pricing**](#all-units-pricing) | Applies one unit price to all units based on the matched quantity range | 8 × 17 = 136 | 57 × 14 = 798 | 221 × 10 = 2210 | | [**Tiered Pricing**](#tiered-pricing) | Calculates each pricing range separately and sums the results | 8 × 17 = 136 | 10 × 17 + 47 × 14 = 828 | 10 × 17 + 90 × 14 + 100 × 12 + 21 × 10 = 2840 | | [**Flat Unit Price per Range**](#flat-unit-price-per-range) | Returns a fixed price based on the matched quantity range | 17 | 14 | 10 | ### Default Pricing This is the default behavior of the Cost Calculator. The value entered by the user is passed directly to the formula field without any modification.

#### Example If the user enters 71, the formula receives 71.

{% hint style="success" %} Use **Default** pricing when no quantity-based pricing logic is required, and calculations are handled entirely inside the formula. {% endhint %} ### All Units Pricing This option applies a single unit price to all selected units within a range. You define quantity ranges and assign a unit price for each range. Once a range is matched, all units are multiplied by the unit price of that range.

#### Example Let's set the pricing range like that: * From 0 to 10 with a unit price of 17 * From 11 to 100 with a unit price of 14 * From 101 to 200 with a unit price of 12 * Rest, from 201 to 250 with a unit price of 10

Here are the results. Switch tabs to check the difference: {% tabs %} {% tab title="Input 8" %} User enters **8.** It matches the first range. \ Final value is **8 × 17 = 136**

{% endtab %} {% tab title="Input 57" %} User enters **57**. It matches the **second** range. \ Final value is **57× 14 = 798**

{% endtab %} {% tab title="Input 221" %} User enters **221.** It matches the **last** range. \ Final value is **221 × 10 = 2210**

{% endtab %} {% endtabs %} {% hint style="success" %} Use this option when you want bulk discounts where all units get the same price once a quantity threshold is reached. {% endhint %} ### Tiered Pricing This option applies different prices to different portions of the quantity. Each range has its own unit price and is calculated independently. The final value is the sum of all tier calculations.

Here are the results. Switch tabs to check the difference: {% tabs %} {% tab title="Input 8" %} User enters **8.** All units fall into the first range:\ Final value is **8 × 17 = 136**

{% endtab %} {% tab title="Input 57" %} User enters **57**. * First 10 units → **10 × 17 = 170** * Next 47 units → **47 × 14 = 658** Final value is **170 + 658 = 828**

{% endtab %} {% tab title="Input 221" %} User enters **221** * First 10 units → 10 × 17 = 170 * Next 90 units → 90 × 14 = 1260 * Next 100 units → 100 × 12 = 1200 * Remaining 21 units → 21 × 10 = 210 Final value is the sum of all: **2840.**

{% endtab %} {% endtabs %} {% hint style="success" %} Use Tiered Pricing when pricing must gradually decrease as quantity increases rather than switching all units to a lower price. {% endhint %} ### Flat Unit Price per Range This option assigns a fixed value when the entered quantity falls within a specific range. Instead of multiplying units, the calculator returns a predefined flat value for the matched range.

Here are the results. Switch tabs to check the difference: {% tabs %} {% tab title="Input 8" %} User enters **8.** All units fall into the first range:\ Final value is **17.**

{% endtab %} {% tab title="Input 57" %} User enters **57**. Matched range is 11 to 100:\ Final value is **14.**

{% endtab %} {% tab title="Input 221" %} User enters **221.** Matched range is 201 to 25:\ Final value is **10.**

{% endtab %} {% endtabs %} {% hint style="success" %} Use this option when pricing is not dependent on unit count and only the selected range matters. {% endhint %} ## Example for Using Basic Slider Element We will show an example of using a range element to calculate the ideal weight. The calculators will have fields to input age, height, gender, and formulas. We will use a range element for users to choose their height.

{% hint style="success" %} Pay attention to the **Maximum Range Value** and **Range Default Value**. The Default Range Value cannot be higher than the Maximum Range Value. {% endhint %} That is how the calculator will look on the user 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 you offer scooters for rent for 1.5 USD/ an hour. The values will multiply by 1.5 to calculate the fees for the rent.

That’s how it will look on the user’s page.

[^1]: r.g 7, 000, 000 (seven millions) --- # Agent Instructions: 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: ``` GET https://docs.stylemixthemes.com/cost-calculator-builder/calculator-elements/range-button.md?ask= ``` The question should be specific, self-contained, and written in natural language. 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.