RangeSliderComponent
Represents the Kendo UI RangeSlider component for Angular. Use this component to let users select a range of values.
Definition
Package:@progress/kendo-angular-inputs
Selector:kendo-rangeslider
Export Name:Accessible in templates as #kendoRangeSliderInstance="kendoRangeSlider"
Syntax:
<kendo-rangeslider [value]="[10, 50]" [min]="0" [max]="100"></kendo-rangeslider>
Inputs
disabled
boolean
When true, disables the Slider.
To disable the component in reactive forms, see Forms Support see example.
false
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.
largeStep
number
Sets every nth tick as large and shows a label for it see example.
null
max
number
Sets the maximum value of the Slider. Accepts integers and floating-point numbers see example.
10
min
number
Sets the minimum value of the Slider. Accepts integers and floating-point numbers see example.
0
readonly
boolean
When true, sets the Slider to read-only see example.
false
smallStep
number
Sets the step value of the Slider. Accepts only positive values. Can be an integer or a floating-point number see example.
1
tickPlacement
string
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.
'both'
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.
identity
Sets the range value of the RangeSlider.
Use either ngModel or the value binding, but not both at the same time.
vertical
boolean
When true. renders a vertical Slider see example.
false
Events
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.