Marketing · Gutenberg
Pricing Slider block for WordPress
Interactive pricing section with a usage/tier slider — drag to select a plan and prices update dynamically with smooth animation.
Get Blockenberg
Free Gutenberg block in Blockenberg. The inspector controls and front-end behavior on this page come from this block’s source, not a shared stub.
What it actually does
Interactive pricing section with a usage/tier slider — drag to select a plan and prices update dynamically with smooth animation.
Inspector panels on this block: Pricing Tiers, Section Settings. Those titles come from index.js, not from a shared template.
Behavior controls: “Features (one per line)” (One feature per line).
Where to find it
Gutenberg inserter → Marketing → search “Pricing Slider” (block name `blockenberg/pricing-slider` in block.json). Style it in the sidebar after insert.
How to use Pricing Slider block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Pricing Slider”, insert it. Category: Marketing.
- Configure inspector controls that exist on this block. Open Pricing Tiers. Set “Label”, “User count label”, “Monthly price (number)”, “Features (one per line)”.
- Check the published page. The view script reads HTML data attributes: data-opts. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Label | Text field in the inspector. |
| User count label | Text field in the inspector. |
| Monthly price (number) | Text field in the inspector. |
| Features (one per line) | Text field in the inspector. One feature per line. |
| Show billing toggle | On/off toggle in the inspector. On by default. Saved as `showBilling`. |
| Annual discount (%) | Numeric range control in the inspector. Range 0–60. block.json default: 20. Saved as `annualDiscount`. |
| Currency symbol | Text field in the inspector. block.json default: $. Saved as `currency`. |
| Period label | Text field in the inspector. block.json default: /month. Saved as `period`. |
| CTA button text | Text field in the inspector. block.json default: Get Started. Saved as `ctaText`. |
| Heading | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `headingTypo`. |
| Subheading | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `subheadingTypo`. |
| Price | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `priceTypo`. |
| CTA Button | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `ctaTypo`. |
| Feature | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `featureTypo`. |
| Card radius | Numeric range control in the inspector. Range 0–60. block.json default: 24. Saved as `cardRadius`. |
| Section background | Color control in the inspector. block.json default: #f8fafc. Saved as `sectionBg`. |
| Card background | Color control in the inspector. block.json default: #ffffff. Saved as `cardBg`. |
| Heading color | Color control in the inspector. block.json default: #1e1b4b. Saved as `headingColor`. |
| Price color | Color control in the inspector. block.json default: #6366f1. Saved as `priceColor`. |
| Feature text | Color control in the inspector. block.json default: #374151. Saved as `featureColor`. |
| Accent / border | Color control in the inspector. block.json default: #6366f1. Saved as `accentColor`. |
| CTA button bg | Color control in the inspector. block.json default: #6366f1. Saved as `ctaBg`. |
| CTA text | Color control in the inspector. block.json default: #ffffff. Saved as `ctaColor`. |
| Slider color | Color control in the inspector. block.json default: #6366f1. Saved as `sliderColor`. |
| Track background | Color control in the inspector. block.json default: #e5e7eb. Saved as `trackBg`. |
| Check icon color | Color control in the inspector. block.json default: #6366f1. Saved as `checkColor`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-opts.
- Keyboard handlers move focus between items.
When this is the right block
- Interactive pricing section with a usage/tier slider — drag to select a plan and prices update dynamically with smooth animation — that is the job of Pricing Slider, not a generic content block.
- Use it when you need the editor control labeled “Label”, which exists on this block’s inspector.
- It matches pages about pricing, slider, plan.
- Inserter grouping: landing pages, campaign sections, and conversion layouts.
Notes from the implementation
viewScript: this folder’s frontend.js is enqueued on the front end for this block.
FAQ
How do I add the Pricing Slider block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Pricing Slider”. It sits under Marketing. After insert, open Pricing Tiers and set “Label”, “User count label”, “Monthly price (number)”, “Features (one per line)”.
What makes Pricing Slider different from other Blockenberg blocks?
Interactive pricing section with a usage/tier slider — drag to select a plan and prices update dynamically with smooth animation. Inspector labels on this block include “Label”, “User count label”, “Monthly price (number)”, “Features (one per line)”.
Is the Pricing Slider Gutenberg block free?
Yes. Pricing Slider ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Pricing Slider to match my theme?
Yes. Blockenberg’s shared typography and color panels apply here, plus any block-specific style controls listed on this page (panels: Pricing Tiers, Section Settings).
Related marketing blocks
Pricing Table
Pricing card with plan name, price, features list, and CTA button. Highlight popular plans with a badge.
Feature List
Rich feature checklist showing included / not-included / partial / coming-soon states per item. Ideal for pricing pages, plan comparisons, and product spec sheets.
Pricing Section
All-in-one multi-tier pricing section with monthly/yearly toggle, feature rows, popular badge, and per-plan CTAs.
Pricing Switcher
Monthly/Yearly toggle that shows or hides pricing columns on the page.
Split Price CTA
Two-column sales section: pricing offer on the left, CTA with supporting benefits on the right. Common on SaaS pricing and checkout pages.
Comparison Cards
Visual side-by-side product or plan comparison cards with features, pricing, and CTA. Distinct from the tabular Comparison Table block.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Pricing Slider from the Gutenberg inserter.