Percent

The “Percent” type generates a simple <input> field, which provides a slider for value picking.

It corresponds with the TCA type='input' (default) with range and slider properties.

Properties

default

| Required: false | Type: integer | Default: 0 |

Default value set if a new record is created.

range

| Required: false | Type: array | Default: ‘’ |

An array which defines an integer range within which the value must be. Keys:

lower (integer/ float)

Defines the lower integer value. Default: 0.

upper (integer/ float)

Defines the upper integer value. Default: 100.

It is allowed to specify only one of both of them.

Example:

range:
  lower: 0
  upper: 100

required

| Required: false | Type: boolean | Default: ‘false’ |

If set, the field will become mandatory.

size

| Required: false | Type: integer | Default: ‘20’ |

Abstract value for the width of the <input> field.

slider

| Required: false | Type: array | Default: ‘’ |

Render a value slider next to the field. Available keys:

step (integer / float)

Set the step size the slider will use. For floating point values this can itself be a floating point value. Default: 1.

width (integer, pixels)

Define the width of the slider. Default: 100.

Example:

range:
  step: 1
  width: 100

trim

| Required: false | Type: boolean | Default: ‘false’ |

If set, the PHP trim function is applied on the field’s content.

valuePicker

| Required: false | Type: array | Default: ‘’ |

Renders a select box with static values next to the input field. When a value is selected in the box, the value is transferred to the field. Keys:

items (array)

An array with selectable items. Each item is an array with the first being the value transferred to the input field, and the second being the label in the select drop-down (LLL reference possible).

Example:

valuePicker:
  items:
    25: 25
    50: 50
    100: 100

Example

group: common
fields:
  - identifier: percent
    type: Percent
    properties:
      default: 0
      range:
        lower: 0
        upper: 100
      required: true
      size: 20
      slider:
        step: 1
        width: 100
      trim: true
      valuePicker:
        items:
          25: 25
          50: 50
          100: 100