Skip to content


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.


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

Field properties

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

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:

    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.