Pricing Slider

← All widgetsWidget 97 · emcp_custom_97

Elementor widget3 layouts21 content options39 style options5 panel sections

Built with the EMCP Widget Builder and registered under the EMCP Custom category of the Elementor panel. Search the panel for: pricing, slider, calculator, range, estimate, plan.

Setup guide

Open a page in Elementor, search the panel for Pricing Slider and drag it into a container.
Content › Slider: Layout, Heading, Unit Label (plural), Unit Label (singular), Minimum, Maximum, Step, Starting Value and 13 more.
Pick a Layout: Stacked (slider above price), Split (slider left, price right), Card. Each one is shown below.
Style tab sections: Box, Slider, Heading & Price, Button. Colours, typography and spacing set here are scoped to this widget instance.
Publish. Every option is a standard Elementor control, so it responds to the editor, dynamic tags and global styles as usual.

Conditional options: Base Price appears when Pricing Mode is per_unit; Price per Unit appears when Pricing Mode is per_unit; Tiers appears when Pricing Mode is tiers.

Ships with its own JavaScript; it runs once per instance and re-initialises inside the Elementor editor preview.

Layout

Stacked (slider above price)

Layout = stacked

How many users do you need?

10 users

1100+

$0$

/ month

Get started

Billed monthly. Cancel anytime.

Layout

Split (slider left, price right)

Layout = split

How many users do you need?

10 users

1100+

$0$

/ month

Get started

Billed monthly. Cancel anytime.

Layout

Card

Layout = card

How many users do you need?

10 users

1100+

$0$

/ month

Get started

Billed monthly. Cancel anytime.

Options reference

Every control the widget exposes, grouped by panel section. Names in code are the setting keys used by the MCP tools (add-free-widget, update-widget).

Content tab

Slider

Option	Type	Choices / range	Default	Notes
Layout `layout`	Dropdown	Stacked (slider above price), Split (slider left, price right), Card	stacked
Heading `heading`	Text		How many users do you need?
Unit Label (plural) `unit_label`	Text		users
Unit Label (singular) `unit_label_single`	Text		user
Minimum `min`	Number	min 0	1
Maximum `max`	Number	min 1	100
Step `step`	Number	min 1	1
Starting Value `start`	Number		10
Pricing Mode `pricing_mode`	Dropdown	Base + price per unit, Tiered (up to N units = price)	per_unit
Base Price `base_price`	Number		0	Shown when pricing_mode = per_unit
Price per Unit `unit_price`	Number		4.5	Shown when pricing_mode = per_unit
Tiers `tiers`	Repeater		3 items	Shown when pricing_mode = tiers
↳ Up to (units) `upto`	Number		10
↳ Price `price`	Number		29
↳ Tier name `label`	Text
Currency Symbol `currency`	Text		$
Currency Position `currency_pos`	Dropdown	Before, After	before
Decimals `decimals`	Number	min 0, max 2	0
Period Label `period`	Text		/ month
Text at Maximum `max_text`	Text			Shown instead of the price when the slider is at its maximum. Leave blank to always show the price.
Show Min / Max Labels `show_ticks`	Toggle	on / off	yes
Button Text `cta_text`	Text		Get started
Button Link `cta_link`	Link
Footnote `note`	Textarea

Style tab

Box

Option	Type	Choices / range	Default	Notes
Background `box_bg`	Background
Padding `box_pad`	Dimensions			Responsive
Border `box_border`	Border
Border Radius `box_radius`	Dimensions
Box Shadow `box_shadow`	Box shadow
Section Gap `box_gap`	Slider	min 0, max 80, px	24
Text Alignment `align`	Button group	Left, Center, Right	center	Responsive

Slider

Option	Type	Choices / range	Default
Track Color `track_color`	Color		#eaecf0
Fill Color `fill_color`	Color		#6a11cb
Thumb Color `thumb_color`	Color		#ffffff
Thumb Border Color `thumb_border`	Color		#6a11cb
Track Height `track_h`	Slider	min 2, max 30, px	8
Thumb Size `thumb_size`	Slider	min 10, max 60, px	24
Current Value Typography `value_typo`	Typography
Current Value Color `value_color`	Color		#101828
Value Bubble Background `value_bg`	Color
Min/Max Typography `tick_typo`	Typography
Min/Max Color `tick_color`	Color		#98a2b3

Heading & Price

Option	Type	Default
Heading Typography `h_typo`	Typography
Heading Color `h_color`	Color	#101828
Price Typography `price_typo`	Typography
Price Color `price_color`	Color	#101828
Currency Typography `cur_typo`	Typography
Period Typography `period_typo`	Typography
Period Color `period_color`	Color	#667085
Tier Name Typography `tier_typo`	Typography
Tier Name Color `tier_color`	Color	#6a11cb
Footnote Typography `note_typo`	Typography
Footnote Color `note_color`	Color	#98a2b3

Button

Option	Type	Choices / range	Default
Typography `btn_typo`	Typography
Text Color `btn_color`	Color		#ffffff
Background `btn_bg`	Color		#6a11cb
Hover Text Color `btn_color_h`	Color
Hover Background `btn_bg_h`	Color
Padding `btn_pad`	Dimensions
Radius `btn_radius`	Slider	min 0, max 60, px	10
Border `btn_border`	Border
Box Shadow `btn_shadow`	Box shadow
Full Width `btn_full`	Toggle	on / off

Add it with the MCP tools

Any connected agent can place this widget: call add-free-widget with widget_type: "emcp_custom_97" and a settings object using the keys above. Run get-custom-widget with id 97 for the full JSON spec.