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: €