Reference

Guide

Range

A handy slider

The range field creates a flexible slider, that can be used to display numbered values in a more visual and intuitive way.

Example

fields:
  budget:
    label: Budget
    type: range
    step: 100
    min: 0
    max: 10000
    tooltip:
      before: $

Field properties

Property Type Default Description
after –

Optional text that will be shown after the input
autofocus bool –

Sets the focus on this field when the form loads. Only the first field with this label gets
before –

Optional text that will be shown before the input
default –

Default number that will be saved when a new page/user/file is created
disabled bool –

If true, the field is no longer editable and will not be saved
help –

Optional help text below the field
icon string –

Optional icon that will be shown at the end of the field
label –

The field label can be set as string or associative array with translations
max float 100

The maximum value on the slider
min float –

The lowest allowed number
required bool –

If true, the field has to be filled in correctly to be saved.
step 1

Allowed incremental steps between numbers (i.e 0.5)
tooltip true

Enables/disables the tooltip and set the before and after values
translate bool true

If false, the field will be disabled in non-default languages and cannot be translated. This is only relevant in multi-language setups.
when –

Conditions when the field will be shown
width string 1/1

The width of the field in the field grid. Available widths: 1/1, 1/2, 1/3, 1/4, 2/3, 3/4

before & after values

The range field can show additional text before or after the input. This is great when you need a price field for example:

fields:
  price:
    label: Price
    type: range
    min: 0
    after: €