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