Skip to content


A range field provides range input interface for selecting a numeric value, typically represented in the browser as a slider. The step option may be used along with min and max, if desired, to effectively limit the results to integers.

Module field definition

// Configuring the `fontSize` field in a module's `fields.add` subsection:
fontSize: {
  type: 'range',
  label: 'Font size',
  min: 14,
  max: 32,
  step: 2



labelStringn/aSets the visible label for the field in the UI
typeStringn/aSpecifies the field type (range for this type)


defNumbern/aThe default value for the field
helpStringn/aHelp text for the content editor
htmlHelpStringn/aHelp text with support for HTML markup
ifObject{}Conditions to meet before the field is active. See the guide for details.
requiredIfObject{}Conditions to meet before the field is required. See the guide for details.
hiddenBooleanfalseIf true, the field is hidden
maxNumbern/aThe maximum allowed value for the field
minNumbern/aThe minimum allowed value for the field
stepNumber1The interval between numbers (it may be a floating point number)
requiredBooleanfalseIf true, the field is mandatory
readOnlyBooleanfalseIf true, prevents the user from editing the field value

Use in templates

{{ data.widget.fontSize }}

{# data.widget.fontSize is a number #}
<h2 style="font-size: {{ data.widget.fontSize }}px;">
  Hello, world