SliderModel

Interface for a class Slider

Properties

change

EmitType<Object>

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<Object>

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<Object>

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

renderingTicks

EmitType<Object>

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.

cssClass

string

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

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

enableAnimation

boolean

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

enablePersistence

boolean

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

enableRtl

boolean

It is used to render the Slider component from right to left direction.

enabled

boolean

It is used to enable or disable the slider.

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 %}

locale

string

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

max

number

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

min

number

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

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.

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.

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 %}

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 %}

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 %}

tooltip

TooltipDataModel

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

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 %}