RangeSliderComponent

Represents the Kendo UI RangeSlider component for Angular.

Selector

kendo-rangeslider

Export Name

Accessible in templates as #kendoRangeSliderInstance="kendoRangeSlider"

Inputs

Name	Type	Default	Description
disabled	boolean		Determines whether the Slider is disabled (see example). To learn how to disable the component in reactive forms, refer to the article on Forms Support.
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.
largeStep	number		Specifies that every nth 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	false	Determines whether the Slider is in its read-only state (see example).
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	RangeSliderValue		Sets the range value of the RangeSlider. 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 RangeSlider.

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