Master Addons
Pricing
View Categories

Number

Roy Jemee
Updated on August 6, 2026

7 min read

The Number field adds a plain numeric input to a custom widget’s panel. Column counts, pixel widths, items per slide, star ratings: any setting that only makes sense as a number belongs here. Inside the Master Addons Widget Builder, you set the allowed range once and the editor gets an input that only accepts numbers within it.

The Number field supports Conditions for showing or hiding the control based on another field, and its token renders through the builder’s Twig-syntax template engine, where numeric comparisons like {% if price > 0 %} work out of the box. Both guides cover setup and limitations.

The value connects to your widget through a template token. Write {{ your_field_name }} in the HTML, CSS, or JS panel and the number prints there at render time. One control can drive markup, styling, and script behavior at the same time.

What the Number field does #

  • Renders a numeric input in the widget’s Elementor panel, with browser spinner arrows.
  • Enforces a range through Min, Max, and Step options you define in the builder.
  • Outputs a plain number wherever you place its {{ token }} in the HTML, CSS, or JS panel.
  • Works in comparisons, so the template can branch with {% if my_number > 3 %}.
  • Supports Elementor’s selectors mechanism as an alternative wiring, writing the value straight into a CSS rule.

Never built a widget with the builder before? The Widget Builder overview walks through the editor itself and is worth ten minutes before you get into individual fields.

Before you start #

  • WordPress with Elementor installed and active.
  • Master Addons for Elementor installed and active. New to the plugin? See the installation guide.
  • A custom widget open in the Widget Builder editor. Our example is a client logo carousel where a Number field named logos_per_slide controls how many logos show at once.

How to add a Number field #

Drag the Number field from the fields panel into a section under the Content or Style tab. As soon as it lands, the field’s options open on the left side of the builder.

Number field options explained #

  • Label: the text shown next to the input in Elementor, for example “Logos Per Slide”.
  • Name: the unique identifier your templates refer to. Letters, numbers, and underscores only, for example logos_per_slide.
  • Default: the number the widget starts with on a fresh drop.
  • Placeholder: hint text shown while the input is empty.
  • Min / Max: the lowest and highest values the input accepts.
  • Step: the increment the spinner arrows move by, for example 1 for whole numbers or 0.5 for half steps.
  • Description: optional helper text under the control.
  • Show Label, Label Block, Separator: the standard display toggles, plus Conditions for showing the field only when another control has a certain value.

Connect the Number field with its token #

The Number field is a token field. Wherever {{ logos_per_slide }} appears in a panel, the current value prints in its place. All three panels accept it:

<!-- HTML panel -->
<div class="logo-track" data-count="{{ logos_per_slide }}">

/* CSS panel */
.logo-track { grid-template-columns: repeat({{ logos_per_slide }}, 1fr); }
.logo-item { min-width: {{ logo_min_width }}px; }

// JS panel
var perSlide = {{ logos_per_slide }};

One thing that fails silently here: an empty field prints an empty string, and repeat(, 1fr) is not valid CSS, so the browser drops the whole rule without complaint. If the token feeds a CSS or JS expression, set a Default so a fresh widget never renders with a hole in it.

Because the value is a number, comparisons work in template logic. A carousel can skip its navigation arrows when everything already fits on one slide:

{% if logos_per_slide > 4 %}
<button class="logo-nav">&rarr;</button>
{% endif %}

The field also supports Elementor’s selectors wiring as an alternative. Note that for Number, Elementor injects the bare value rather than a full declaration, so the selectors entry must spell out the whole property, for example width: {{VALUE}}px;.

Watch out: when the token lands inside a CSS or JS expression, put the unit outside the braces. width: {{ logo_min_width }}px works; expecting the field to carry its own unit does not, because the value is a bare number. If you need the editor to pick the unit too, the Slider field is the better fit.

Use the Number control in Elementor #

Drop your custom widget onto a page in Elementor (reload the editor first if the page was already open). The Number field appears as a small input with spinner arrows under the label you set. Type a value or click the arrows. The preview updates live, and values outside the Min/Max range are rejected by the input itself.

Common use cases #

  • Column and item counts printed into a CSS grid or flex rule.
  • Carousel settings such as slides per view or autoplay delay, read by the JS panel.
  • Pixel and percentage values where a single unit is fixed by the widget, like a fixed-unit width or gap.
  • Ratings and scores that the template compares against thresholds.
  • Limits like “show at most N posts”, passed into the widget’s script.

Tips for working with the Number field #

  • Set Min and Max. A column count of 0 or 40 will break most layouts; bounding the input in the builder is cheaper than guarding it in the template.
  • Match Step to the value’s meaning. Whole items get 1; opacity-style values get 0.1.
  • Ship a sensible Default so the widget renders correctly the moment it is dropped.
  • Compare against numbers, not labels. {% if logos_per_slide > 4 %} is valid template logic; there is no option label to compare here, unlike a Select field.
  • Full declarations in selectors entries. If you wire the field through the Selector option instead of a token, write the complete property, since Elementor injects only the bare value for Number.

Frequently Asked Questions #

What is the Number field in the Master Addons Widget Builder?

The Number field adds a numeric input to a custom Elementor widget’s panel, with Min, Max, Step, Default, and Placeholder options. Its value prints through a {{ token }} in the widget’s HTML, CSS, or JS panel, and template logic can compare it with operators like > and ==.

Can I use the Number field’s value in the CSS panel?

Yes. Place the token inside any rule, for example grid-template-columns: repeat({{ columns }}, 1fr); or width: {{ box_width }}px;. Remember to write the unit yourself, since the field stores only the number.

How do I read the value in JavaScript?

Print the token directly in the JS panel: var perSlide = {{ logos_per_slide }};. The number is rendered into the script before it runs, so no DOM lookup is needed.

Can the template branch on the value?

Yes. Conditionals accept comparisons: {% if my_number > 3 %} ... {% endif %}, along with <, >=, <=, ==, and !=. This is useful for hiding navigation, badges, or extra markup below a threshold.

What happens if the user types a value outside Min and Max?

The input enforces the range, so out-of-range values do not reach the template. Set Min and Max in the builder to whatever keeps the widget’s layout intact.

When should I use Slider instead of Number?

Use the Slider field when the editor should also choose the unit (px, %, em) or drag a handle within a range; its value carries both a size and a unit. Use Number when a bare number is enough and you control the unit in the template.

Wrapping up #

The Widget Builder Number field does exact work: one bounded numeric input, one token, and the value lands wherever the widget needs it, in markup, styles, or script. Pair it with the Switcher field for on/off behavior and the Repeater field when the count should come from real items instead of a setting. Explore the rest of the Master Addons widgets and extensions, and see the pricing page for what each plan includes.

What are your Feelings