Skip to content

Kirby 3.9.0

Range input

<k-range-input>

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.

<k-input v-model="range" name="range" type="range" />

Props

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

Events

Event Description Passes
input
invalid
  • undefined

Tooltip

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

CSS classes

.k-range-input