Ej1 api migration in Angular Range Slider component

10 Jan 20255 minutes to read

This article describes the API migration process of Slider component from Essential JS 1 to Essential JS 2

Behavior API in Essential JS 1 API in Essential JS 2
Max value Property: maxValue

<ej-slider id='slider' maxValue="100"></ej-slider> 		Property: max

<ejs-slider id='slider' max='100'></ejs-slider>
Min value Property: minValue

<ej-slider id='slider' minValue="100"></ej-slider> 		Property: min

<ejs-slider id='slider' min='20'></ejs-slider>
Step Property: incrementStep, largeStep, smallStep, showSmallTicks

<ej-slider id='slider' incrementStep="20" smallStep="5" largeStep="40" showSmallTicks="true"></ej-slider> 		Property: ticks

public ticks = { placement: ‘After’, largeStep: 20, smallStep: 10, showSmallTicks: true };

<ejs-slider id='slider' [ticks]='ticks'></ejs-slider>
Type Property: sliderType

<ej-slider id='slider' sliderType='range'></ej-slider> 		Property: type

<ejs-slider id='slider' type='Range'></ejs-slider>
Tooltip Property: showTooltip

<ej-slider id='slider' showTooltip="true"></ej-slider> 		Property: tooltip

public tooltip = { placement: ‘Before’, isVisible: true, showOn: ‘Always’ };

<ejs-slider id='slider' [tooltip]='tooltip'></ejs-slider>
RTL Property: enableRTL

<ej-slider id='slider' enableRTL="true"></ej-slider> 		Property: enableRtl

<ejs-slider id='slider' enableRtl='false'></ejs-slider>
Custom values Not Applicable Property: customValues

public customValues = [‘Mon’, ‘Tue’, ‘Wed’];

<ejs-slider id='slider' customValues='customValues'></ejs-slider>
Limit the slider movement Not Applicable Property: limits

public limits = { enabled: true, minStart: 10, minEnd: 40 };

<ejs-slider id='slider' type='MinRange' limits='limits'></ejs-slider>
Disable Method: disable

<ej-slider #slider id='slider'></ej-slider>

this.sliderObj.disable(); 		Property: enabled

<ejs-slider id='slider' enable='false'></ejs-slider>
Enable Method: enable

<ej-slider #slider id='slider'></ej-slider>

this.sliderObj.enable(); 		Property: enabled

<ejs-slider #slider id='slider'></ejs-slider>

this.sliderObj.enable = true;
Set Value Method: setValue(value ,[enableAnimation])

<ej-slider #slider id='slider'></ej-slider>

this.sliderObj.setValue(10); 		Property: value

<ejs-slider #slider id='slider'></ejs-slider>

this.sliderObj.value = 50;
Get Value Method: getValue()

<ej-slider #slider id='slider'></ej-slider>

this.sliderObj.getValue(); 		Property: value

<ejs-slider #slider id='slider'></ejs-slider>

let sliderValue = this.sliderObj.value;
Destroy Not Applicable Method: destroy()

<ejs-slider #slider id='slider' enable='false'></ejs-slider>

this.sliderObj.destroy();
Change Event: change

public change(args: Event): void { }

<ej-slider #slider id='slider' (change)='change($event)'></ej-slider> 		Event: change

public change(args: Event): void { }

<ejs-slider #slider id='slider' (change)='change($event)'></ejs-slider>
Create Event: create

public create(args: Event): void { }

<ej-slider #slider id='slider' (create)='create($event)'></ej-slider> 		Event: created

public created(args: Event): void { }

<ejs-slider #slider id='slider' (created)='created($event)'></ejs-slider>
Slide Event: slide

public slide(args: Event): void { }

<ej-slider #slider id='slider' (slide)='slide($event)'></ej-slider> 		Event: change

public change(args: Event): void { }

<ejs-slider #slider id='slider' (change)='change($event)'></ejs-slider>
Start Event: start

public start(args: Event): void { }

<ej-slider #slider id='slider' (start)='start($event)'></ej-slider> 		Event: created

public created(args: Event): void { }

<ejs-slider #slider id='slider' (created)='created($event)'></ejs-slider>
Stop Event: stop

public stop(args: Event): void { }

<ej-slider #slider id='slider' (stop)='stop($event)'></ej-slider> 		Event: changed

public changed(args: Event): void { }

<ejs-slider #slider id='slider' (changed)='changed($event)'></ejs-slider>
Rendered Ticks Not Applicable Event: renderedTicks

public renderedTicks(args: Event): void { }

<ejs-slider #slider id='slider' (renderedTicks)='renderedTicks($event)'></ejs-slider>