range

A range field provides range input (opens new window) 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
}

Settings

Required

Property	Type	Default	Description
label	String	n/a	Sets the visible label for the field in the UI
type	String	n/a	Specifies the field type (range for this type)

Optional

Property	Type	Default	Description
def	Number	n/a	The default value for the field
help	String	n/a	Help text for the content editor
htmlHelp	String	n/a	Help text with support for HTML markup
if	Object	{}	Conditions to meet before the field is active. See the guide for details.
max	Number	n/a	The maximum allowed value for the field
min	Number	n/a	The minimum allowed value for the field
step	Number	1	The interval between numbers (it may be a floating point number)
required	Boolean	false	If true, the field is mandatory
readOnly	Boolean	false	If 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
</h2>