RangeSlider
Represents the KendoVue RangeSlider component.
Accepts properties of type RangeSliderProps.
Obtaining the ref returns an object of type RangeSliderHandle.
Use the RangeSlider to let the user select a range of numbers by dragging two handles.
Definition
Package:@progress/kendo-vue-inputs
Properties Interface:RangeSliderProps
Syntax:
<RangeSlider :min="0" :max="100" :step="5" :default-value="{ start: 20, end: 80 }" />Properties
ariaDescribedBy?
string
Sets the IDs of the elements that describe the RangeSlider, like the HTML aria-describedby attribute. For example, these elements can contain an error or a hint message.
ariaLabelledBy?
string
Sets the IDs of the elements that label the RangeSlider.
Sets the initial value of the RangeSlider when you do not set value.
The value is an object of type Range with start and end fields.
{ start: 0, end: 0 }
dir?
string
Sets the direction of the RangeSlider. Accepts ltr or rtl.
'ltr'
disabled?
boolean
Sets whether the RangeSlider is disabled.
endTabIndex?
number
Sets the tabIndex attribute of the end drag handle.
id?
string
Sets the id of the wrapping div element of the RangeSlider.
max
number
Sets the maximum value of the RangeSlider.
min
number
Sets the minimum value of the RangeSlider.
name?
string
Sets the name property of the input DOM element.
onChange?
(event: RangeSliderChangeEvent) => void
Fires each time the user changes the value. The event name is change.
required?
boolean
Sets whether null is a valid value for the component.
startTabIndex?
number
Sets the tabIndex attribute of the start drag handle.
step?
number
Sets the step by which the value increases or decreases.
1
valid?
boolean
Overrides the validity state of the component.
When you set valid, the component ignores the required property.
validationMessage?
string
Sets the form error message of the component. If you set it to an empty string, the component shows no error.
validityStyles?
boolean
Shows or hides the invalid state styles of the component. When you set it to false, the component shows no invalid state styles.
Sets the value of the RangeSlider. Use it to control the value.
The value is an object of type Range with start and end fields.
vertical?
boolean
Changes the orientation of the RangeSlider from horizontal to vertical when you set it to true.
References
Represents the target of the change event of the RangeSlider.