Range input

<k-range-input>

kirby/panel/src/components/Forms/Input/RangeInput.vue

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`

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

CSS classes

.k-range-input