Element: Slider

Introduction

Sliders are popular UI components allowing users to select values within a pre-defined range. They're both versatile and intuitive. Here, we’ll walk you through everything you need to know about setting up and using sliders with the 'Stylish Cost Calculator'. 

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

Benefits, Features & Use Cases

Efficiency: Sliders require less validation than input fields, minimizing errors due to incorrect entries.

User-Friendly: With a clearly defined range, sliders eliminate unnecessary errors for users.

Versatility: Ideal for settings with a defined range like guest meal reservations or volume controls.

Interactivity: Sliders can be linked to any elements within the same subsection, allowing them to:

Act as multipliers for other elements.

Serve as product selectors, e.g., choosing X amount of an 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