Articles on: Elements

Element: Slider

Introduction

Sliders are useful tools for businesses using the Stylish Cost Calculator. They help make forms easy to use and interactive. Sliders let users choose values within a set range, which is great for things like adjusting quantities or setting prices. You can use sliders to multiply the amount of services, offer bulk discounts, or set sliding scale prices. By using sliders, you make the forms simpler, reduce mistakes, and improve how they work. In this guide, we'll show you the benefits and features of sliders, and explain how to set them up and use them in the Stylish Cost Calculator. Whether you run a car rental service, a catering business, or any other service that can be customized, sliders can help you create better and more efficient forms for your needs.

Benefits, Features & Use Cases

Benefits of Sliders

Efficiency: Sliders make it quick and easy for users to select values within a range, reducing the time needed to fill out forms and minimizing the chances of input errors.

User-Friendly: Sliders provide a visually intuitive way for users to adjust quantities or set values, making forms more engaging and accessible. Users can easily see the impact of their selections in real-time.

Features & Use Cases

Sliding Scale

Example: A landscaping company offers different pricing tiers based on the size of the lawn they are servicing. This encourages customers with larger lawns to choose higher service packages, providing clear and predictable pricing based on their specific needs.

For lawns up to 1,000 square feet, the total price is $100.
For lawns between 1,001 and 2,000 square feet, the total price is $180.
For lawns between 2,001 and 3,000 square feet, the total price is $250.

Volume-Based Discounts (Bulk Pricing)

Example: An online bookstore provides volume discounts on bulk purchases. Incentiviznig customers to purchase more books at a lower per-unit cost.

If a customer buys 1-5 books, each book costs $15.
If they buy 6-10 books, the price drops to $12 per book.

Package Pricing

Example: A wedding planner offers different packages based on the number of services chosen. This allows couples to customize their package and see the total price instantly.

A basic package might include just the ceremony for $500.
Adding a reception brings the price to $1,000, and including catering and decorations increases the total to $1,500.

Quantity Modifier

Example: A car rental company uses a slider to let customers choose the number of rental days. Additional services like GPS or child seats are then multiplied by the number of days.

For example, if a customer rents a car for 3 days (slider) and selects a GPS unit (dropdown), the cost for the GPS is $10 per day, resulting in a total of $30 for the GPS over the rental period.

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:

Default Pricing

The standard way of using a slider is to determine the cost per unit of a product or service.
Example: Each T-shirt costs $2.00.

Bulk Discounts (Quantity Discounts)

Add a price range and calculate at a per-unit cost.
Example: 1-10 T-shirts cost $4.00 each, while 11-20 T-shirts cost $2.00 each.

And it'll look like this:

Sliding Scale

Set a flat price between price ranges and calculate at a total range cost.
Example: 1-10 T-shirts cost $40 in total, while 11-20 T-shirts cost $60 in total.

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

Element Quantity Modifier Only

Use the slider to change the quantity of an element in the same subsection.
Example: A dropdown lists T-shirts at $10.00 each. Adding a slider multiplies the cost by the number of T-shirts selected.

Here's an example to use the slider to modify the quantity of a product or service displayed in a dropdown menu.

This is how the Slider looks like:

And this is the final result:

Note: all pricing modes will act as a quantity modifier for other elements in the same subsection.

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 other calculator form actions like: email PDF quote, add-to-cart checkout, or viewing the itemized list.

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

Subsections & Sliders

Purpose: Subsections are designed to control the subtotal of a group of related services and the impact a slider has on the quantity of elements within the same subsection.
Subtotals: Subsections calculate the subtotal for a group of related items, providing a clear breakdown of costs for the customer.
Slider Integration: Subsections are particularly useful for implementing sliders that act as quantity multipliers. You can only have one slider per subsection, and the main purpose of a subsection is to manage how the slider affects the elements inside it.
Use Case: For example, in a car rental form, you might have a subsection for "Rental Duration" where a slider controls the number of rental days, affecting the cost of related add-ons like GPS or child seats.

By effectively using sections and subsections, you can create well-organized, user-friendly forms that provide clear and accurate pricing information, improving the overall customer experience.

Learn more about Subsections & Sliders