Introduction


Sliders are a very common and widely spread UI pattern. It allows users to select a value within a range of numbers that you can manually set. 


In the following sections, we will provide you with all the information you need to set up your sliders. 




Benefits, Features & Use Cases


Range sliders have a technical advantage over the input field as it will require less validation to be sure. For the same reason, it can benefit the user because a range slider will not generate an unnecessary error due to an “incorrect” entry.


Range sliders work great when you have a strictly defined range that can only have a small number of values. For example, guest meal reservations or maybe a volume control.


Sliders are linked to any elements in the same subsection.
1. It can act as a multiplier of other elements.

2. It can act as a product selector. Buy X amount of item.


Learn more about the slider modes and pricing structures
Learn more about triggering a fee or discount




Watch It In-Action






How to Activate & Use This Feature


To add a slider, simply click on the "+ Add Element" button and then "Slider"


Settings & Options


The title is an easy one, let's continue with "Pricing Structure" and here is when things get interesting:



1. Default Pricing


The standard way of using a slider is to determine how much each unit will cost a product for service. 
For example, each T-Shirt will cost $2.00




2. Bulk Discounts (Quantity Discounts)


- Add a price range
- Calculates at a per-unit cost.


For example, let's say you want to sell T-Shirts and you want to add a discount based on the amount of T-Shirts the customer wants to purchase.


When selecting 1-10 T-Shirts, your customers will pay $4.00 per each T-Shirt and if they select 11-20 T-Shirts, they would pay $2.00 per each T-Shirt




And it'll look like this:





3. Sliding Scale

Set a flat price between price ranges 

- Add a price range 

- Calculates at a total range cost.


For example, let's say you want to sell 1-10 T-Shirts at a total price of $40 or 11-20 at the total price of $60



Pro Tip: You can add as many ranges you need with the "+Add Price Range" button




4. Element Quantity Modifier Only


- Used to change the select quantity of an element in the same subsection.


For example, we have have a Dropdown with the item "T-Shirt" at a cost of $10.00 each. If we add a Slider directly underneath, it will multiply the cost of each T-Shirt by the number on the slider.




This is how the Dropdown looks like: 




This is how the Slider looks like:





And this is the final result:






Now, let's go ahead and explore the "Advanced Options"


"Required" by activating this option, users will be forced to select an option before being able to continue to checkout or a price quote. 




"Price Hint" shows the user a temporary price bubble that shows the amount added to the total when they select this item. 




You can choose if you want this item to be displayed on the Detailed List & PDF



When activating the "Quantity Input Box" it will add a quantity input box to the end of the slider, linking both elements together

 


The "starting value" will be the starting point of the slider and the "slider steps" are the number of numbers the slider will jump every time you slide it.



Finally, the "Tooltip" will create a frontend information icon so you can better explain to the customers what this item is about while keeping your calculator form organized.


 


Video Tutorial 






Additional Information



Related Features


Number input: https://designful.freshdesk.com/support/solutions/articles/48001081164-element-number-input

Dropdown menu: https://designful.freshdesk.com/support/solutions/articles/48001207045-element-dropdown-menu