SliderComponent

Represents the Kendo UI Slider component for Angular.

html

<kendo-slider [min]="0" [max]="10" [smallStep]="1" [(ngModel)]="value"></kendo-slider>

Selector

kendo-slider

Export Name

Accessible in templates as #kendoSliderInstance="kendoSlider"

Inputs

Name	Type	Default	Description
animate	boolean	true	Determines if the component animates when the value changes. The component does not animate during initial rendering.
decrementTitle	string		Sets the title of the Decrease button of the Slider (see example).
disabled	boolean	false	When true, disables the Slider. To disable the component in reactive forms, see Forms Support see example.
dragHandleTitle	string		Changes the title attribute of the drag handle. Use this property to localize the drag handle title.
fixedTickWidth	number		Sets the width between two ticks along the track, in pixels. If you do not set fixedTickWidth, the Slider adjusts the tick width automatically see example.
incrementTitle	string		Sets the title of the Increase button of the Slider (see example).
largeStep	number	null	Sets every nth tick as large and shows a label for it see example.
max	number	10	Sets the maximum value of the Slider. Accepts integers and floating-point numbers see example.
min	number	0	Sets the minimum value of the Slider. Accepts integers and floating-point numbers see example.
readonly	boolean	false	When true, sets the Slider to read-only see example.
showButtons	boolean	true	Shows or hides the arrow side buttons of the Slider (see example). When you set showButtons to false, the component does not display the buttons.
smallStep	number	1	Sets the step value of the Slider. Accepts only positive values. Can be an integer or a floating-point number see example.
tabindex	number	0	Sets the tabindex of the Slider.
tickPlacement	string	'both'	Sets the location of the tick marks in the Slider see example. The options are: before – Shows tick marks above a horizontal track or left of a vertical track. after – Shows tick marks below a horizontal track or right of a vertical track. both – Shows tick marks on both sides of the track. none – Hides tick marks and removes them from the DOM.
title	SliderTickTitleCallback		Sets the title for the ticks. The default title for each tick is its Slider value. If you use a callback function, the function receives the component value and returns a string for the new title see example.
value	number	0	Sets the current value of the Slider when it first appears. Use either ngModel or the value binding, but not both at the same time.
vertical	boolean	false	When true. renders a vertical Slider see example.

Events

Name	Type	Description
blur	EventEmitter<any>	Fires when the component is blurred.
focus	EventEmitter<any>	Fires when the user focuses the component.
valueChange	EventEmitter<any>	Fires when the user selects a new value.

Methods

blur
Blurs the Slider.

focus
Focuses the Slider.