Slider

The Slider field adds Elementor’s drag-to-set range control to a custom widget built with the Master Addons Widget Builder. Editors drag a handle or type a number, pick a unit, and the value goes into your CSS. Use it for gaps, widths, heights, icon sizes, font sizes or anything else that’s one number plus a unit.

Slider is a Pro field. The free plugin includes a limited Widget Builder, and the full set of fields comes with Master Addons Pro.

What the Slider field does #

• It shows a slider with a number box and a unit menu in the Elementor panel.
• You set the minimum, maximum and step, plus a starting value.
• The value is a number and a unit together, such as 24 and px.
• You connect it to your CSS with a CSS Selectors row, or print it in the HTML or CSS tab with two tokens.

If you haven’t built a widget yet, read the Widget Builder overview first.

Before you start #

• WordPress with Elementor installed and active.
• Master Addons for Elementor and Master Addons Pro, both active. The installation guide covers setup.
• A widget open in the Widget Builder. The example in this guide is a “Team Grid” widget with two sliders: Card Gap for the space between cards and Avatar Size for the round initials.

How to add a Slider field #

1. Go to Master Addons > Widget Builder and open your widget.
2. Click the Style tab and add a section, for example “Grid Layout”.
3. Type slider in the field search box on the left.
4. Drag Slider into the section. Its settings open in the left sidebar.

Slider field options explained #

• Label is the text above the slider in Elementor, for example “Card Gap”.
• Name is the field’s unique ID and the start of its tokens, so card_gap gives {{ card_gap.size }}. Letters, numbers and underscores only.
• Description appears under the slider in Elementor.
• Min Value, Max Value and Step set the range and how far each move of the handle goes. Card Gap uses 0 to 80 in steps of 2.
• Default Value is the starting number and unit, set with its own small slider and unit menu.

Type the Min, Max and Step values even if the boxes already show 0, 100 and 1. Boxes you never touch aren’t saved, and a slider with none of them saved falls back to Elementor’s ranges: 0 to 1000 for px, 0 to 100 for %, and 0 to 10 for em and rem. When you do set them, the same range is used for every unit, so 0 to 80 applies to em as well as px.

There’s no setting for which units appear. Editors can choose px, %, em and rem. Further down, Responsive Control adds the device icon so desktop, tablet and mobile can have different values.

Connect the slider with CSS Selectors #

Scroll to CSS Selectors and click Add Item. The new row comes filled with an example (.text-1, .text-2 and color: {{VALUE}};), so replace both boxes:

CSS Selector:   .team-grid
CSS Properties: gap: {{SIZE}}{{UNIT}};

{{SIZE}} is replaced with the number and {{UNIT}} with the chosen unit, so 24 px becomes gap: 24px;. You don’t need {{WRAPPER}} in the selector because the builder adds it for you. Add more rows to use the same value on other elements.

Use these rows rather than the single Selector box at the bottom of the sidebar. That box has no place for a CSS property, so it can’t write a working rule for a slider.

Use the value in your template instead #

You can also print the value in the HTML or CSS tab. Write the size and the unit as two tokens next to each other. The Avatar Size slider sets the avatar width and height this way:

.team-avatar {
  width: {{ avatar_size.size }}{{ avatar_size.unit }};
  height: {{ avatar_size.size }}{{ avatar_size.unit }};
}

A bare {{ avatar_size }} prints nothing. You can also compare the number in a condition, for example {% if card_gap.size >= 40 %}. When Responsive Control is on, use a CSS Selectors row, since Elementor then writes a separate rule for each device.

Click Save Settings when you’re done.

Use the Slider control in Elementor #

Add the widget to a page, or reload the editor if the page was already open. Select the widget and open the Style tab. Each slider shows a handle, a number box and a unit label.

Drag the handle or type a number, and the widget updates straight away. Click the unit label to switch between px, %, em and rem.

Here the gap is raised to 48px and the avatars to 96px:

Common use cases #

• Gaps between cards, columns and list items.
• Width, max-width or height of an image, card or section.
• Icon, avatar and badge sizes.
• Font size or line height for one element.
• Border radius or border width when all sides share one value.

Tips for working with the Slider field #

• Always type Min, Max and Step so the slider has a sensible range.
• Pick a range that fits every unit editors might choose. 0 to 80 is fine for px but very large for em.
• Keep a base value for the property in the CSS tab, like gap: 24px;, so the widget looks right before anyone touches the slider.
• Replace the example text in a new CSS Selectors row. Left as it is, the row targets classes your widget doesn’t have.
• For values with four sides, such as padding or margin, use the Dimensions field.

Frequently Asked Questions #

Wrapping up #

Add the Slider field, type the Min, Max and Step, set a default, and connect it with a CSS Selectors row such as gap: {{SIZE}}{{UNIT}};. Use the .size and .unit tokens when the value belongs in your HTML or CSS tab. For other sizing controls, see the Dimensions and Typography fields, and check pricing for what each plan includes.