Skip to content

Kirby 3.6.0

Range field

<k-range-field>

This UI component hasn't been finalized yet. The functionality and syntax aren't stable and might be redone in an upcoming release. Only use it at your own risk - breaking changes are likely to occur.

Have a look at <k-field>, <k-input> and <k-range-input> for additional information.

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

Props

Prop Type Default Description
after
string
autofocus
boolean
before
string
counter
boolean|object
default
number|string
disabled
boolean
endpoints
object
help
string
icon
string|boolean
id
number|string
function() { return this._uid; }
input
string|number
invalid
boolean
label
string
max
number
100
The highest accepted number
min
number
0
The lowest required number
name
number|string
novalidate
boolean
false
required
boolean
step
number
1
The amount to increment when dragging the slider. This can be a decimal.
theme
string
tooltip
boolean|object
function() { return { before: null, after: null }; }
The slider tooltip can have text before and after the value.
translate
boolean
type
string
value
number|string
null

Events

Event Description Passes
blur
focus

Slots

Slot Description
after
before
counter
default
footer
header
help
icon
label
options

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"
/>

Tooltip

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

CSS classes

.k-range-field