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

Option	Type	Default	Description
`after`	`mixed`		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`	`mixed`		Optional text that will be shown before the input
`default`	`mixed`		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`	`mixed`		Optional help text below the field
`icon`	`string`		Optional icon that will be shown at the end of the field
`label`	`mixed`		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`	`mixed`	`1`	Allowed incremental steps between numbers (i.e 0.5)
`tooltip`	`mixed`	`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.
`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

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