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
Name | Type | Default | Description |
---|---|---|---|
$after | mixed |
null
|
Optional text that will be shown after the input |
$autofocus | bool |
null
|
Sets the focus on this field when the form loads. Only the first field with this label gets |
$before | mixed |
null
|
Optional text that will be shown before the input |
$default | mixed |
null
|
Default number that will be saved when a new page/user/file is created |
$disabled | bool |
null
|
If true , the field is no longer editable and will not be saved |
$help | mixed |
null
|
Optional help text below the field |
$icon | string |
null
|
Optional icon that will be shown at the end of the field |
$label | mixed |
null
|
The field label can be set as string or associative array with translations |
$max | float |
100.0
|
The maximum value on the slider |
$min | float |
null
|
The lowest allowed number |
$required | bool |
null
|
If true , the field has to be filled in correctly to be saved. |
$step | mixed |
null
|
Allowed incremental steps between numbers (i.e 0.5 ) Use any to allow any decimal value. |
$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. |
$when | mixed |
null
|
Conditions when the field will be shown (since 3.1.0) |
$width | string |
'1/1'
|
The width of the field in the field grid, e.g. 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: €
How to use in templates/snippets
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.