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

Slider

Directive

kendo-slider

Props

decrease-button-title String

The title of the decrease button of the Slider (decreaseButtonTitle in Kendo UI for jQuery).

drag-handle-title String

The title of the drag handle of the Slider (dragHandleTitle in Kendo UI for jQuery).

increase-button-title String

The title of the increase button of the Slider (increaseButtonTitle in Kendo UI for jQuery).

large-step Number

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 largeStep will also set a large tick for every large step and must be a positive number that is larger than smallStep.

max Number

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

min Number

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

orientation String

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

The supported values are:

  • horizontal
  • vertical

show-buttons Boolean

If show-buttons is set to true, the increase and decrease buttons of the Slider are displayed, and if show-buttons is set to false, the increase and decrease buttons of the Slider are hidden (showButtons in Kendo UI for jQuery).

small-step Number

The small step value of the Slider which determines the amount of the value change when the user clicks the increase or decrease buttons, presses the arrow keys when the drag handle is focused, or drags the drag handle (smallStep in Kendo UI for jQuery). Must be a positive number, otherwise, throws a JavaScript exception.

tick-placement String

The location of the tick marks in the Slider (tickPlacement in Kendo UI for jQuery).

The supported options are:

  • topLeft—Tick marks are located on the top of the horizontal Slider or to the left of the vertical Slider.
  • bottomRight—Tick marks are located on the bottom of the horizontal Slider or to the right side of the vertical Slider.
  • both—Tick marks are located on both sides of the Slider.
  • none—Tick marks are invisible.

tooltip Object

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

value Number

The underlying value of the Slider (value in Kendo UI for jQuery).

Events

change: Function

Fires when the value of the Slider changes as a result of selecting a new value with one of the drag handles, with the buttons, 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 Slider instance.