Skip to content

Field range

The field is used to enter numerical values.


autofocus Optional

  • Type: boolean | 'true' | 'false'

If this parameter is passed, when setting this field, control will be automatically transferred to it.

step Optional

  • Type: number | string This field has a mechanism to increase or decrease the entered number by 1. To change this parameter the step attribute must be set.

min Optional

  • Type: number | string

Setting the lower limit of the value.

max Optional

  • Type: number | string

Setting the upper limit of the value.

Also ,all parameters common to all FormField. Information about them can be found on this page.


This field works with a string value.


  • The field is available when using Tab and Shift + Tab.
  • Lock cancels Tab navigation.
  • Blocking the field changes the style of range.
  • Validation error changes range style.
  • Use min and max attributes to limit input.


There are no additional-required parameters for this field, so we need to specify only type and name:

<form-field name = "volume" type="range"/>
<form-field name = "volume" type="range"/>
import {FormField} from "jenesius-vue-form";
import {FormField} from "jenesius-vue-form";

Default field:

Enter value

In locked state:


Field not validated:

With error

The password is too simple

Setting bounds via max and min:

From 0 to 100

Setting step to 2:

With step eq 2

The current state of the form:


Released under the MIT License.