Number Field Type

Control Type

Default: Input with type="number" to limit input to numerical characters.

slider: Use a range input, along with additional constraints to control the input values.

Stored Value

Number as an integer or float value, depending on subtype.

Usage Example#

Here is an example that shows a readTime field on a page.

1
2
3
4
5
6
7
8
9
10

export default {
  models: {
    Page: {
      fields: [
        { name: 'title', type: 'string', required: true },
        { name: 'readTime', type: 'number', label: 'Read Time (Minutes)' },
      ],
    },
  },
}

This is a simple input with number type to limit input to numerical values. See below for additional control types.

Additional Properties#

The additional properties apply to all control types, but are most useful to the slider control.

max

Maximum allowed value.

Default: 100

min

Minimum allowed value.

Default: 0

step

Controls the step increments for the slider control. If using the default control type, the value will be corrected upon save to the closest available step.

Default: 1

subtype

Controls how the number is saved. While decimals can be entered in the field, they are stripped if this property is set to int.

Options: float, int

Default: int

unit

A label to add when using the slider control.

Default: None

An example of these properties in action can be seen below.

Control Types#

There are additional controls beyond the default number input.

`slider`#

The slider control provides a range input that will adhere to the additional properties listed above.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

export default {
  models: {
    Page: {
      fields: [
        { name: 'title', type: 'string', required: true },
        {
          name: 'progress',
          type: 'number',
          controlType: 'slider',
          min: 0,
          max: 100,
          step: 10,
          unit: '%',
        },
      ],
    },
  },
}

Usage Example#

Additional Properties#

Control Types#

slider#

`slider`#