Create a Pricing Slider Using Elementor Addons in WordPress

Help your customers find the right pricing fit with the Pricing Slider widget from Qi Addons for Elementor. This widget creates interactive pricing lists where users can work to set their ideal balance between the product or service they want and how much it will cost them. Simply by adjusting the slider part of the element, users will be able to set quantities or units and, in doing so, affect the price total. The Pricing Slider widget makes the calculations automatically and is incredibly easy to use overall. Additionally, its setup in the backend is straightforward and you don’t need any technical knowledge to get started.

With 100+ advanced and superbly designed widgets, Qi Addons for Elementor Premium is an exclusive collection of varied Elementor addons that allows you to create attractive and engaging page elements for your WordPress website. Follow along with our step-by-step tutorial as we guide you through the Pricing Slider widget’s options and show you how to make the most of them. We’ll be making a pricing slider element from scratch, and going through the various options you have for customizing it.

You can jump to specific parts of the video by clicking the appropriate timestamp link in the following list:

00:00 - Introducing the Pricing Slider widget
01:17 - Getting started
05:50 - Customizing the text content
07:17 - Customizing the separator
08:32 - Customizing the button
10:39 - Styling the pricelist
12:31 - Styling the slider
16:36 - Styling the pricelist title
19:10 - Styling the price total
22:11 - Styling the pricelist description text
23:11 - Styling the separator
25:41 - Styling the pricelist button
31:23 - Using the Info Spacing Style options
32:55 - Styling the slider text
34:42 - Creating and customizing a second Pricing Slider
38:09 - Adding the Slider Info content
38:52 - Styling the second Pricing Slider
43:28 - Styling the pricelist button
47:26 - Styling the Slider Info content
50:10 - Enabling delimiters and styling them

For the best demonstrations of what you can create with Qi Addons for Elementor, make sure to check out the Qi Theme, exclusively created by our award-winning designers. The theme offers 150 easily importable demos (all made with Qi Addons), has premium stock photos included, and much more. Links for the Qi Theme and Qi Addons for Elementor plugin can be found below.

The Pricing Slider Widget:

The Qi Addons for Elementor plugin:

Learn more about working with Elementor:

Check out our entire collection of 500+ premium WordPress themes at:

Don’t forget to sign up for our newsletter and be the first to find out all the latest news:

Follow us on all your favorite social networks.

[paulbrouns]

Unfortunately I do not see the Pricing Slider option in Elementor (Pro). When searching in the widgets the system only shows Price Table and Price List. Is this due to recent Elementor updates?

[PedroCreates]

Hi, just have a question for you guys. If have a website with different "users type" will the users who sign up as "creators" have the ability to set prices for their service(s) through a slider like this?

[dons]

Do you have a video on the price reduction and breakpoints? I've tried using it and the math ain't mathing, so I must be doing something wrong.

[KamalAhmad-ikqn]

i want to add multiple price columns How?