Skip to main content
Version: Divi 5

Number Field

Purpose​

The Number field type renders a numeric input. You can set min, max, and step; optionally Convert to Range Slider to show a slider (single or double) with skin, prefix/postfix, and colors.

When to use​

  • Quantities, ages, ratings, or any numeric value with optional bounds.
  • When a slider is better UX (e.g. price range, satisfaction level).

Key settings​

  • Field — Field Type: number, Field Title.
  • Validation — Required (if needed).
  • Number — Min Number, Max Number, Number Increase Step, Convert Range Slider.
  • Range (when range slider is on) — Range type (single/double), min/max/step, prefix/postfix, skin, colors, hide from/to.

Top features to configure​

  • Convert to range slider — Turn this on when users should drag instead of type.
  • Single vs double slider — Use single for one value (e.g. budget), double for ranges (e.g. min/max price).
  • Min, max, and step — Keep these aligned with your real limits so users cannot pick invalid values.
  • Prefix and postfix — Add units like $, %, kg, or days to make values clear.
  • Slider skin and colors — Match your form design so the slider is easy to spot and use.

Validation behavior​

  • Required enforces a value before submission.
  • Min/max/step define acceptable numeric input ranges.
  • Slider mode should use the same min/max/step values as your business logic.

Common mistakes​

  • Using mismatched min/max values between field expectations and downstream logic.
  • Setting step values that make expected numbers impossible to select.
  • Switching to slider mode without checking mobile usability and display spacing.

Verify it works​

  1. Submit values inside and outside min/max boundaries.
  2. Confirm invalid values are blocked and valid values save correctly.
  3. If slider mode is enabled, test desktop and mobile interactions.

What's Next​