# 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