Name	Type	Description
animate	`boolean`	Determines if the animation will be played on value change. Regardless of this setting, no animation will be played during the initial rendering.
decrementTitle	`string`	Sets the title of the Decrease button of the Slider (see example).
disabled	`boolean`	Determines whether the Slider is disabled (see example).
dragHandleTitle	`string`	Changes the `title` attribute of the drag handle so that it can be localized.
fixedTickWidth	`number`	Sets the width between each two ticks along the track (see example). The value has to be set in pixels. If no `fixedTickWidth` is provided, the Slider automatically adjusts the tick width to accommodate the elements within the size of the component.
incrementTitle	`string`	Sets the title of the Increase button of the Slider (see example).
largeStep	`number`	Specifies that every n^th tick will be large and will have a label (see example). Accepts positive integer values only.
max	`number`	The maximum value of the Slider (see example). The attribute accepts both integers and floating-point numbers.
min	`number`	The minimum value of the Slider (see example). The attribute accepts both integers and floating-point numbers.
readonly	`boolean`	Determines whether the Slider is in its read-only state (see example).
showButtons	`boolean`	Renders the arrow side buttons of the Slider (see example). When `showButtons` is set to `false`, the buttons are not displayed.
smallStep	`number`	The step value of the Slider (see example). Accepts positive values only. Can be an integer or a floating-point number.
tabindex	`number`	Specifies the tabindex of the Slider.
tickPlacement	`string`	Denotes the location of the tick marks in the Slider (see example). The available options are: `before`—The tick marks are located to the top side of the horizontal track or to the left side of a vertical track. `after`—The tick marks are located to the bottom side of the horizontal track or to the right side of the vertical track. `both`— (Default) The tick marks are located on both sides of the track. `none`—The tick marks are not visible. The actual elements are not added to the DOM tree.
title	`SliderTickTitleCallback`	Defines the title of the ticks (see example). The default title for each tick is its Slider value. If you use a callback function, the function accepts an argument that holds the value of the component and returns a string with the new title.
value	`number`	The current value of the Slider when it is initially displayed. The component can use either NgModel or the `value` binding but not both of them at the same time.
vertical	`boolean`	If `vertical` is set to `true`, the orientation of the Slider changes from horizontal to vertical (see example).

Events

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

Methods

blur
Blurs the Slider.

focus
Focuses the Slider. @Component({ selector: 'my-app', template: ` <button (click)="slider.focus()">Focus</button> <kendo-slider #slider></kendo-slider> ` }) class AppComponent { }

focus

Focuses the Slider.

@Component({
selector: 'my-app',
template: `
 <button (click)="slider.focus()">Focus</button>
 <kendo-slider #slider></kendo-slider>
`
})
class AppComponent { }

SliderComponent

Selector

Export Name

Inputs

animate

decrementTitle

disabled

dragHandleTitle

fixedTickWidth

incrementTitle

largeStep

max

min

readonly

showButtons

smallStep

tabindex

tickPlacement

title

value

vertical

Events

blur

focus

valueChange

Methods

blur

focus

In this article

Not finding the help you need?

Getting Started

Support Resources

Community