---
title: Slider
description: "The Slider field adds Elementor's drag-to-set range control to a custom widget built with the Master Addons [Widget Builder](https://master-addons.com/widget-builder/). Editors drag a handle or type a number, pick a unit, and the value goes into your CSS. Use it for…"
url: "https://master-addons.com/docs/widget-builder/slider/"
updated: "2026-09-17"
category: Widget Builder
---

# Slider

The Slider field adds Elementor's drag-to-set range control to a custom widget built with the Master Addons [Widget Builder](https://master-addons.com/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](https://master-addons.com/pricing/).

![Team grid built with the Widget Builder Slider field shown with a 24px gap and 64px avatars, then a 48px gap and 96px avatars](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/17092221/widget-builder-01-slider-field-team-grid-sizes.webp)

## 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](https://master-addons.com/docs/widget-builder/widget-builder-settings/) first.

## Before you start

- WordPress with Elementor installed and active.
- Master Addons for Elementor and Master Addons Pro, both active. The [installation guide](https://master-addons.com/docs/getting-started/installing-plugin/) 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 found by searching slider in the Master Addons Widget Builder with Card Gap and Avatar Size sliders in a Style section](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/17092224/widget-builder-02-slider-field-widget-builder.webp)

## Slider field options explained

![Slider field options with Label, Name, Min Value 0, Max Value 80, Step 2 and a Default Value of 24px](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/17092227/widget-builder-03-slider-field-options.webp)

- **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}};
```

![CSS Selectors row with the selector .team-grid and the property gap using SIZE and UNIT](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/17092230/widget-builder-04-slider-css-selectors-row.webp)

`{{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 }};
}
```

![Widget CSS using avatar_size.size and avatar_size.unit tokens for the avatar width and height](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/17092233/widget-builder-05-slider-css-tokens-avatar-size.webp)

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.

![Card Gap and Avatar Size slider controls in the Elementor Style tab next to the team grid](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/17092237/widget-builder-06-slider-controls-elementor.webp)

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

![Unit menu open on the Card Gap slider in Elementor showing px, %, em and rem](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/17092240/widget-builder-07-slider-unit-menu-elementor.webp)

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

![Team grid in Elementor after setting Card Gap to 48px and Avatar Size to 96px](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/17092244/widget-builder-08-slider-changed-values-elementor.webp)

## 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](https://master-addons.com/docs/widget-builder/dimensions/).

## Frequently Asked Questions

   Is the Slider field free?

No. Slider is one of the Pro fields in the Widget Builder, so Master Addons Pro has to be active before you can add it to a widget.

 Why does my slider token print nothing?

A slider holds a number and a unit, so `{{ field_name }}` on its own prints nothing. Use `{{ field_name.size }}{{ field_name.unit }}`.

 Why does the slider go up to 1000?

Min, Max and Step weren't saved. Type values into all three boxes, even if they already show 0, 100 and 1, then save the widget.

 Can I limit the slider to px only?

Not from the field panel. Editors can pick px, %, em or rem. Choose a range that works for all four, or set a sensible default so px is the starting unit.

 Do I need {{WRAPPER}} in the CSS Selector?

No. The builder adds `{{WRAPPER}}` in front of the selector for you, so `.team-grid` is enough.

## 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](https://master-addons.com/docs/widget-builder/dimensions/) and [Typography](https://master-addons.com/docs/widget-builder/typography/) fields, and check [pricing](https://master-addons.com/pricing/) for what each plan includes.