Range Field

Basic example

<k-range-field v-model="range" name="range" label="Slider" />

Advanced example

<k-range-field
    v-model="range"
    :max="10000"
    :min="1000"
    :step="100"
    :required="true"
    before="$"
    after="budget"
    label="Budget"
    help="This is a nice slider"
    @input="input"
/>

Props

after

String (default: null)

Text that is shown after the input (right before the icon)

autofocus

Boolean (default: false)

If true, the field will be instantly focused when the form is created

before

String (default: null)

Text that is shown before the input

disabled

Boolean (default: false)

If true, the field is disabled and cannot be filled in or edited

help

String (default: null)

Sets the help text below the field

icon

String (default: null)

Sets the icon, that is shown on the right next to the input.

label

String (default: null)

Sets the label text for the field.

max

Number (default: null)

The highest accepted number

min

Number (default: null)

The lowest required number

name

String (default: null)

The name of the field must be defined to get fields in fieldsets up and running.

required

Boolean (default: false)

If true, the field must not be empty

step

Number (default: 1)

The amount to increment when dragging the slider. This can be a decimal.

Boolean|Object (default: false)

The slider tooltip can have text before and after the value.

<k-range-input
    :tooltip="{
        before: '$',
        after: 'total'
    }"
/>

value / v-model

Number (default: null)

Methods

focus()

Set the focus on the field.

Events

@input

The input event is triggered when the value changes.

CSS class

.k-range-field