Marketing · Elementor
Pricing Slider widget for Elementor
An interactive pricing slider: visitors drag a value and see the matching price or package.
Get King Addons
This page describes the PHP/JS for this widget — not a renamed stub. Install the free plugin from WordPress.org.
What it actually does
An interactive pricing slider: visitors drag a value and see the matching price or package.
render() writes HTML data attributes: data-features, data-min-value, data-price-data.
Output depends on WooCommerce objects (products, cart, or account). Empty without WooCommerce data.
The widget script reads data attributes: data-attribute, data-price.
The script talks to WooCommerce front-end events or add-to-cart URLs.
How to add it in Elementor
- Install King Addons. Install Elementor and King Addons. Get King Addons from WordPress.org.
- Edit with Elementor. Open a page and click Edit with Elementor.
- Insert the widget. Search the panel for “Pricing Slider”. Typing “king” lists every King Addons widget.
- Set inspector controls from this widget’s PHP. Configure “Title”, “Description”, “Minimum Value”, “Maximum Value”. Style and Content tabs are listed on this page.
When to use it
- Seat-based SaaS pricing.
- A “how many pages?” quote slider.
- A usage estimator before checkout.
Tip: After King Addons is active, type king in the Elementor search box to list every widget, including Pricing Slider.
Inspector controls from this widget’s PHP
| Control | What the code does |
|---|---|
| Pricing Slider — Title | Printed in the widget HTML from render(). |
| Pricing Slider — Description | Printed in the widget HTML from render(). |
| Slider Settings — Minimum Value | Numeric value used in this widget’s render/JS (default 1, min 0). |
| Slider Settings — Maximum Value | Numeric value used in this widget’s render/JS (default 100, min 1). |
| Slider Settings — Default Value | Numeric value used in this widget’s render/JS (default 50, min 1). |
| Slider Settings — Step | Numeric value used in this widget’s render/JS (default 1, min 1). |
| Slider Settings — Minimum Label | Printed in the widget HTML from render(). |
| Slider Settings — Maximum Label | Printed in the widget HTML from render(). |
| Slider Settings — Price Prefix | Printed in the widget HTML from render(). |
| Slider Settings — Price Suffix | Printed in the widget HTML from render(). |
| Slider Settings — Currency Symbol | The chosen value is read in render() and applied on the front end. Options: None; Dollar; Euro; Pound Sterling; Ruble; Shekel; Baht; Yen/Yuan…. |
| Slider Settings — Custom Symbol | Saved on the widget and consumed in render(). |
| Slider Settings — Currency Position | The chosen value is read in render() and applied on the front end. Options: Before; After. |
| Slider Settings — Period | Printed in the widget HTML from render(). |
| Slider Settings — Price Formula | The chosen value is read in render() and applied on the front end. Options: Linear (ax + b); Custom Prices. |
| Slider Settings — Coefficient (a) | Numeric value used in this widget’s render/JS (default 1). |
| Slider Settings — Constant (b) | Numeric value used in this widget’s render/JS (default 0). |
| Custom Prices — Value | Numeric control (default 1, min 0). |
| Custom Prices — Price | Numeric control (default 10, min 0). |
| Slider Settings — Custom Prices | Repeater rows; render() loops each item to build the list or slides. |
| Features — Show Features | Switcher inspector control (`show_features`). |
| Features — Feature Text | Text inspector control (`feature_text`). |
| Features — Minimum Value | Feature will be included starting from this value. |
| Features — Included Icon | Icon rendered with Elementor Icons_Manager in this widget’s HTML. |
| Features — Excluded Icon | Icon rendered with Elementor Icons_Manager in this widget’s HTML. |
| Features | Repeater rows; render() loops each item to build the list or slides. |
| Button — Show Button | Switcher inspector control (`show_button`). |
| Button — Button Text | Printed in the widget HTML from render(). |
| Button — Button URL | Elementor URL control (href, new tab, nofollow) applied to a front-end link. |
| Header — Title Color | Writes CSS `color` onto the widget’s front-end markup. |
| Header — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-pricing-slider__title`. |
| Header — Description Color | Writes CSS `color` onto the widget’s front-end markup. |
| Header — Typography (Description Typography) | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-pricing-slider__description`. |
| Header — Spacing | Writes CSS `margin-bottom` onto the widget’s front-end markup. (min 0, max 100). |
| Header — Alignment | Writes CSS `text-align` onto the widget’s front-end markup. Options: Left; Center; Right. |
| Slider — Track Background Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Slider — Track Height | Spacing/size control (min 1, max 50). |
| Slider — Progress Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Slider — Thumb Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Slider — Thumb Size | Spacing/size control (min 10, max 100). |
| Slider — Border Color | Writes CSS `border-color` onto the widget’s front-end markup. |
| Slider — Border Width | Writes CSS `border-width` onto the widget’s front-end markup. (min 0, max 20). |
| Slider — Border Style | Writes CSS `border-style` onto the widget’s front-end markup. Options: Default; None; Solid; Dashed; Dotted; Double. |
| Slider — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Slider — Enable Shadow | When this switch is on, render() outputs the wrapped markup. |
| Slider — Thumb Shadow Settings | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-pricing-slider__custom-thumb`. |
| Slider — Show Current Value | Switcher inspector control (`show_current_value_indicator`). |
| Slider — Background Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Slider — Text Color | Writes CSS `color` onto the widget’s front-end markup. |
| Slider — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Slider — Border Radius (Current Value Border Radius) | Writes CSS `border-radius` onto the widget’s front-end markup. (min 0, max 50). |
| Slider — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-pricing-slider__current-value`. |
| Slider — Text Color (Range Values Text Color) | Writes CSS `color` onto the widget’s front-end markup. |
| Slider — Typography (Range Values Typography) | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-pricing-slider__range-min-value, {{WRAPPER}} .king-addons-pric…`. |
| Slider — Background Color (Range Values Bg Color) | Writes CSS `background-color` onto the widget’s front-end markup. |
| Slider — Padding (Range Values Padding) | Writes CSS `padding` onto the widget’s front-end markup. |
| Slider — Border Radius (Range Values Border Radius) | Writes CSS `border-radius` onto the widget’s front-end markup. (min 0, max 50). |
| Slider — Margin (Around Container) | Writes CSS `margin` onto the widget’s front-end markup. |
| Control Groups — Background Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Control Groups — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. (min 0, max 50). |
| Control Groups — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Control Groups — Margin | Writes CSS `margin` onto the widget’s front-end markup. |
| Price — Price Color | Writes CSS `color` onto the widget’s front-end markup. |
| Price — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-pricing-slider__price`. |
| Price — Currency Color | Writes CSS `color` onto the widget’s front-end markup. |
| Price — Typography (Currency Typography) | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-pricing-slider__currency`. |
| Price — Period Color | Writes CSS `color` onto the widget’s front-end markup. |
| Price — Typography (Period Typography) | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-pricing-slider__period`. |
| Price — Spacing | Writes CSS `margin-bottom` onto the widget’s front-end markup. (min 0, max 100). |
| Price — Alignment | Writes CSS `text-align` onto the widget’s front-end markup. Options: Left; Center; Right. |
| Features — Text Color | Writes CSS `color` onto the widget’s front-end markup. |
| Features — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-pricing-slider__feature-item`. |
| Features — Included Icon Color | Writes CSS `color` onto the widget’s front-end markup. |
| Features — Excluded Icon Color | Writes CSS `color` onto the widget’s front-end markup. |
| Features — Default Background Color | Default background for all feature items. Specific backgrounds can be set below. |
| Features — Background Color (Included) | Writes CSS `background-color` onto the widget’s front-end markup. |
| Features — Text Color (Included) | Writes CSS `color` onto the widget’s front-end markup. |
| Features — Typography (Included) | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-pricing-slider__feature-item.king-addons-feature-included .kin…`. |
| Features — Background Color (Excluded) | Writes CSS `background-color` onto the widget’s front-end markup. |
| Features — Text Color (Excluded) | Writes CSS `color` onto the widget’s front-end markup. |
| Features — Typography (Excluded) | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-pricing-slider__feature-item.king-addons-feature-excluded .kin…`. |
| Features — Border Color (Included) | Writes CSS `border-color` onto the widget’s front-end markup. |
| Features — Border Color (Excluded) | Writes CSS `border-color` onto the widget’s front-end markup. |
| Features — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Features — Spacing Between | Writes CSS (feature-item, margin-bottom) onto the widget’s front-end markup. (min 0, max 50). |
| Features — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Features — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-pricing-slider__feature-item`. |
| Button (Normal) — Text Color | Writes CSS `color` onto the widget’s front-end markup. |
| Button (Normal) — Background Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Button (Hover) — Text Color | Writes CSS (button, add-to-cart, color) onto the widget’s front-end markup. |
| Button (Hover) — Background Color | Writes CSS (button, add-to-cart, background-color) onto the widget’s front-end markup. |
| Button (Hover) — Border Color | Writes CSS (button, add-to-cart, border-color) onto the widget’s front-end markup. |
| Button (Hover) — Hover Animation | Animation picker; the chosen effect is applied on the front end. |
| Button — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-pricing-slider__button, {{WRAPPER}} .king-addons-pricing-slide…`. |
| Button — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Button — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-pricing-slider__button, {{WRAPPER}} .king-addons-pricing-slide…`. |
| Button — Alignment | Writes CSS `text-align` onto the widget’s front-end markup. Options: Left; Center; Right. |
| Range Labels (Min/Max) — Text Color | Writes CSS `color` onto the widget’s front-end markup. |
| Range Labels (Min/Max) — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-pricing-slider__range-min`. |
| Range Labels (Min/Max) — Background Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Range Labels (Min/Max) — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Range Labels (Min/Max) — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Range Labels (Min/Max) — Text Color (Max Label Text Color) | Writes CSS `color` onto the widget’s front-end markup. |
| Range Labels (Min/Max) — Typography (Max Label Typography) | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-pricing-slider__range-max`. |
| Range Labels (Min/Max) — Background Color (Max Label Bg Color) | Writes CSS `background-color` onto the widget’s front-end markup. |
| Range Labels (Min/Max) — Padding (Max Label Padding) | Writes CSS `padding` onto the widget’s front-end markup. |
| Range Labels (Min/Max) — Border Radius (Max Label Border Radius) | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Slider Labels — Text Color | Writes CSS `color` onto the widget’s front-end markup. |
| Slider Labels — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-pricing-slider__control-label`. |
| Slider Labels — Background Color | Writes CSS `background-color` onto the widget’s front-end markup. |
| Slider Labels — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Slider Labels — Margin | Writes CSS `margin` onto the widget’s front-end markup. |
| Slider Labels — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
| Slider Labels — Text Alignment | Writes CSS `text-align` onto the widget’s front-end markup. Options: Left; Center; Right. |
Content and Style tabs from this widget’s PHP, including repeater fields and group controls (typography, background, border, shadow). Elementor’s Advanced tab is core Elementor and is not listed here.
FAQ
Which Pricing Slider options need King Addons Pro?
Controls marked with the Pro icon in this widget’s PHP. King Addons Pro is a separate license from Elementor Pro.
Does Pricing Slider require WooCommerce?
Yes. This widget reads WooCommerce products, cart, or account objects. Install WooCommerce and add data before the widget has anything to show.
How do I add Pricing Slider in Elementor?
Install King Addons and Elementor, edit a page, search the panel for “Pricing Slider”, drag it onto the canvas, then set Content and Style.
Do I need Elementor Pro?
No. King Addons runs on free Elementor. Some King Addons options (for example template-in-accordion, extra popup conditions, parts of the template catalog) need King Addons Pro — not Elementor Pro.
Related marketing widgets
Pricing Table
Pricing columns with features, highlight plan, and a button — built for SaaS and service packages.
Price List & Menu
A menu or price list: item, description, price, optional image — for restaurants and services.
Pricing Calculator
A quote calculator with parameters (quantity, options) that updates a total on the page.
Testimonial & Review Carousel
A carousel of testimonials so you can show many quotes without stacking the page.
Business Hours
Opening hours with weekday rows, highlights for today, and closed states.
Countdown & Timer
A countdown to a date (or evergreen) for launches, sales, and events.
Get King Addons
One free plugin. 80+ Elementor widgets, 650+ templates, and 4,000+ sections. Search for Pricing Slider after you activate it.