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:
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
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.
Default Value - the initial range value is automatically set for this field before user input or changes.
Unit Name - You can put unit measures, such as kg(kilograms), gr(grams), m (meters), etc, in this field. You can also decide whether you want unit measures, such as kg, to appear on the right or left.
Position - choose where to display the unit name against the field value.
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 Basic Slider 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.
Pricing Structure
⭐Premium Feature
The Pricing Structure setting determines how the Cost Calculator calculates the field's final value based on the quantity selected by the user. It allows you to override the field value before it is passed to the formula field. This is especially useful for applying quantity-based discounts or custom pricing logic.
Pricing structure is available in Quantity and Basic Slider Elements.
Pricing Structure has 4 different options:
By default, the calculator uses the Default pricing structure. It just passes the entered value by the user to the formula field without changes.
Pricing Structure is not available when the Multiply by Unit Price setting is on.
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 value of the element that you set, and ends with the maximum 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:
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
Applies one unit price to all units based on the matched quantity range
8 × 17 = 136
57 × 14 = 798
221 × 10 = 2210
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
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.
Use Default pricing when no quantity-based pricing logic is required, and calculations are handled entirely inside the formula.
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:
User enters 8. It matches the first range. Final value is 8 × 17 = 136
User enters 57. It matches the second range. Final value is 57× 14 = 798
User enters 221. It matches the last range. Final value is 221 × 10 = 2210
Use this option when you want bulk discounts where all units get the same price once a quantity threshold is reached.
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.
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:
User enters 8. All units fall into the first range: Final value is 8 × 17 = 136
User enters 57.
First 10 units → 10 × 17 = 170
Next 47 units → 47 × 14 = 658
Final value is 170 + 658 = 828
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.
Use Tiered Pricing when pricing must gradually decrease as quantity increases rather than switching all units to a lower price.
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.
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:
User enters 8. All units fall into the first range: Final value is 17.
User enters 57. Matched range is 11 to 100: Final value is 14.
User enters 221. Matched range is 201 to 25: Final value is 10.
Use this option when pricing is not dependent on unit count and only the selected range matters.
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.
Pay attention to the Min Value and Max Value. The Default Range Value cannot be higher than the Maximum Value.
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.
Last updated
Was this helpful?