SliderComponent

Represents the EJ2 Angular Slider Component.

<ejs-slider [value]='value'></ejs-slider>

Properties

cssClass

string

This property sets the CSS classes to root element of the Slider which helps to customize the UI styles.

Defaults to ”

customValues

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

enableAnimation

boolean

It is used to enable or disable the Slider handle moving animation.

Defaults to true

enablePersistence

boolean

Enable or disable persisting component’s state between page reloads.

Defaults to false

enableRtl

boolean

Enable or disable rendering component in right to left direction.

Defaults to false

enabled

boolean

It is used to enable or disable the slider.

Defaults to true

limits

LimitDataModel

It is used to limit the slider movement within certain limits. Refer the documentation here to know more about this property with demo {% codeBlock src=“slider/limits-api/index.ts” %}{% endcodeBlock %}

Defaults to { enabled: false }

locale

string

Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.

Defaults to ”

max

number

It sets the maximum value of Slider Component {% codeBlock src=“slider/min-max-api/index.ts” %}{% endcodeBlock %}

Defaults to 100

min

number

It sets the minimum value of Slider Component {% codeBlock src=“slider/min-max-api/index.ts” %}{% endcodeBlock %}

Defaults to 0

orientation

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’

readonly

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

showButtons

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. {% codeBlock src=“slider/showButtons-api/index.ts” %}{% endcodeBlock %}

Defaults to false

step

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. {% codeBlock src=“slider/step-api/index.ts” %}{% endcodeBlock %}

Defaults to 1

ticks

TicksDataModel

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. {% codeBlock src=“slider/ticks-api/index.ts” %}{% endcodeBlock %}

Defaults to { placement: ‘before’ }

tooltip

TooltipDataModel

It is used to denote the slider tooltip and it’s position. {% codeBlock src=“slider/tooltip-api/index.ts” %}{% endcodeBlock %}

Defaults to { placement: ‘Before’, isVisible: false, showOn: ‘Focus’, format: null }

type

string

It is used to denote the type of the Slider. The available options are:

• default - Used to select a single value in the Slider.
• minRange - Used to select a single value in the Slider. It displays shadow from the start value to the current value.
• range - Used to select a range of values in the Slider. It displays shadow in-between the selection range.

value

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. {% codeBlock src=“slider/value-api/index.ts” %}{% endcodeBlock %}

Defaults to null

Methods

destroy

Prepares the slider for safe removal from the DOM. Detaches all event handlers, attributes, and classes to avoid memory leaks.

Returns void

reposition

It is used to reposition slider.

Returns void

Events

change

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.

changed

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.

created

EmitType<Object>

We can trigger created event when the Slider is created.

renderedTicks

EmitType<SliderTickRenderedEventArgs>

We can trigger renderedTicks event when the ticks are rendered on the Slider.

renderingTicks

EmitType<SliderTickEventArgs>

We can trigger renderingTicks event when the ticks rendered on Slider, which is used to customize the ticks labels dynamically.

tooltipChange

EmitType<SliderTooltipEventArgs>

We can trigger tooltipChange event when we change the Sider tooltip value.