Range

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

Name	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		–	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 (since 3.1.0)
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: €

Echo the field value:

<?= $page->range() ?>

Convert the field value to an integer:

<?= $page->range()->toInt() ?>

Convert the field value to a float:

<?= $page->range()->toFloat() ?>

For more field manipulations, check out Kirby's field methods.