Range Field
<k-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.
tooltip
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