New to Kendo UI for Vue? Start a free 30-day trial

Represents the props of the Kendo UI for Vue RangeSlider component.

Definition

Package:@progress/kendo-vue-inputs

Properties

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.

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.

Default:

{ start: 0, end: 0 }

dir?

string

Sets the direction of the RangeSlider. Accepts ltr or rtl.

Default:

'ltr'

disabled?

boolean

Sets whether the RangeSlider is disabled.

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.

Fires each time the user changes the value. The event name is change.

Parameters:eventRangeSliderChangeEvent

required?

boolean

Sets whether null is a valid value for the component.

Sets the tabIndex attribute of the start drag handle.

step?

number

Sets the step by which the value increases or decreases.

Default:

1

valid?

boolean

Overrides the validity state of the component. When you set valid, the component ignores the required property.

Sets the form error message of the component. If you set it to an empty string, the component shows no error.

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.