Represents the EJ2 Angular Slider Component.
<ejs-slider [value]='value'></ejs-slider>It is used to render the color to the slider based on the given value
string
This property sets the CSS classes to root element of the Slider which helps to customize the UI styles.
Defaults to ”
string[] | number[]
It is used to denote own array of slider values. The value should be specified in array of number or string.The min,max and step value is not considered
Defaults to null
boolean
It is used to enable or disable the Slider handle moving animation.
Defaults to true
boolean
Enable or disable persisting component’s state between page reloads.
boolean
Enable or disable rendering component in right to left direction.
boolean
It is used to enable or disable the slider.
Defaults to true
It is used to limit the slider movement within certain limits. Refer the documentation here to know more about this property with demo
Defaults to { enabled: false }
string
Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.
number
It sets the maximum value of Slider Component
Defaults to 100
number
It sets the minimum value of Slider Component
Defaults to 0
string
It is used to render Slider in either horizontal or vertical orientation. Refer the documentation here to know more about this property with demo.
Defaults to ‘Horizontal’
boolean
It is used to render the Slider component in read-only mode. The slider rendered with user defined values and can’t be interacted with user actions.
Defaults to false
boolean
It is used to show or hide the increase and decrease button of Slider Component, which is used to change the slider value. Refer the documentation here to know more about this property with demo.
Defaults to false
number
It is used to denote the step value of Slider component which is the amount of Slider value change when increase / decrease button is clicked or press arrow keys or drag the thumb. Refer the documentation here to know more about this property with demo.
Defaults to 1
It is used to render the slider ticks options such as placement and step values. Refer the documentation here to know more about this property with demo.
Defaults to { placement: ‘before’ }
It is used to denote the slider tooltip and it’s position.
Defaults to { placement: ‘Before’, isVisible: false, showOn: ‘Focus’, format: null }
string
It is used to denote the type of the Slider. The available options are:
number | number[]
It is used to denote the current value of the Slider. The value should be specified in array of number when render Slider type as range.
Defaults to null
Prepares the slider for safe removal from the DOM. Detaches all event handlers, attributes, and classes to avoid memory leaks.
Returns void
It is used to reposition slider.
Returns void
EmitType<SliderChangeEventArgs>
We can trigger change event whenever Slider value is changed. In other term, this event will be triggered while drag the slider thumb.
EmitType<SliderChangeEventArgs>
We can trigger changed event when Slider component action is completed while we change the Slider value. In other term, this event will be triggered, while drag the slider thumb completed.
EmitType<Object>
We can trigger created event when the Slider is created.
EmitType<SliderTickRenderedEventArgs>
We can trigger renderedTicks event when the ticks are rendered on the Slider.
We can trigger renderingTicks event when the ticks rendered on Slider, which is used to customize the ticks labels dynamically.
EmitType<SliderTooltipEventArgs>
We can trigger tooltipChange event when we change the Sider tooltip value.