Introduction
Getting Started
Vue 2 End of Support
Vue Wrappers End of Life
Native Components
Wrapper Components
- Introduction
- Barcodes
- Buttons
- Charts
- Chat
- DataSource
- Date Inputs
- Diagram
- Dialog
- Dropdowns
- DropDownTree
- Editor
- Gantt
- Gauges
- Grid (wrapper)
- Inputs
- - Overview
  - ColorPicker
  - MaskedTextBox
  - NumericTextBox
  - RangeSlider
  - Slider
  - Switch
  - API
- Layout
- List Views
- ListBox
- Map
- MediaPlayer
- PivotGrid
- Popups
- Scheduler
- ScrollView
- Spreadsheet
- TreeList
- TreeMap
- TreeView
- Upload
- Validator
- Window
- Framework & Features
- Globalization
- Troubleshooting
- Using Wrapper Components in Vite
Sample Applications
Styling & Themes
Common Features
Project Setup
Knowledge Base
Changelog
FAQ
Troubleshooting

Components / Inputs / API / RangeSlider API /

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

RangeSlider

The delta with which the value of the RangeSlider will change when the drag handle is focused and the user presses the Page Up or Page Down key (largeStep in Kendo UI for jQuery). The allied largeStep will also set a large tick for every large step.

left-drag-handle-title `String`

The title of the left drag handle of the RangeSlider (leftDragHandleTitle in Kendo UI for jQuery).

max `Number`

The maximum value of the RangeSlider (max in Kendo UI for jQuery).

min `Number`

The minimum value of the RangeSlider (min in Kendo UI for jQuery).

orientation `String`

The orientation of the RangeSlider (orientation in Kendo UI for jQuery).

The supported values are:

horizontal
vertical

right-drag-handle-title `String`

The title of the right drag handle of the RangeSlider (rightDragHandleTitle in Kendo UI for jQuery).

selection-end `Number`

The end selection value of the RangeSlider (selectionEnd in Kendo UI for jQuery).

selection-start `Number`

The start selection value of the RangeSlider (selectionStart in Kendo UI for jQuery).

small-step `Number`

The small step value of the RangeSlider (smallStep in Kendo UI for jQuery).

The underlying value will be changed when the user does any of the following:

Clicks the increase or decrease buttons of the RangeSlider.
Presses the Arrow keys when the drag handle is focused.
Drags the drag handle.

tick-placement `String`

Denotes the location of the tick marks in the RangeSlider (tickPlacement in Kendo UI for jQuery). The available options are:

The configuration of the RangeSlider tooltip (tooltip in Kendo UI for jQuery). The supported composite props are available in TooltipProps.

Events

change: `Function`

Fires when the value of the RangeSlider changes as a result of selecting a new value with one of the drag handles or with the keyboard (change in Kendo UI for jQuery.

slide: `Function`

Fires when the user drags the drag handle to a new position (slide in Kendo UI for jQuery.

Methods

For more details about the methods available in the component's API please check its Kendo UI for jQuery API documentation.

kendoWidget

returns

Returns the Kendo UI RangeSlider instance.

RangeSlider

Directive

Props

large-step `Number`