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 maxValue={60} /> |
Property: max <SliderComponent id='slider' max={100} /> |
| Min value | Property: minValue <EJ.Slider minValue={60} /> |
Property: min <SliderComponent id='slider' min={100} /> |
| Step | Property: incrementStep, largeStep, smallStep, showSmallTicks <EJ.Slider incrementStep={20} smallStep={5} largeStep={40} showSmallTicks={true} /> |
Property: ticks public ticks = { placement: ‘After’, largeStep: 20, smallStep: 10, showSmallTicks: true }; <SliderComponent id='slider' ticks={this.ticks} /> |
| Type | Property: sliderType <SliderComponent id='slider' value={30} sliderType="minrange" /> |
Property: type <SliderComponent id='slider' type='Range' /> |
| Tooltip | Property: showTooltip <SliderComponent id='slider' value={30} showTooltip={true} /> |
Property: tooltip public tooltip = { placement: ‘Before’, isVisible: true, showOn: ‘Always’ }; <SliderComponent id='slider' tooltip={this.tooltip} /> |
| RTL | Property: enableRTL <SliderComponent id='slider' value={30} enableRTL={true} /> |
Property: enableRtl <SliderComponent id='slider' enableRtl={false} /> |
| Custom values | Not Applicable | Property: customValues public customValues = [‘Mon’, ‘Tue’, ‘Wed’]; <SliderComponent id='slider' customValues={this.customValues} /> |
| Limit the slider movement | Not Applicable | Property: limits public limits = { enabled: true, minStart: 10, minEnd: 40 }; <SliderComponent id='slider' type='MinRange' limits={this.limits} /> |
| Disable | Method: disable <SliderComponent id='slider' value={30} /> public sliderObj = ${"#slider"}.ejSlider("instance"); sliderObj.disable(); |
Property: enabled <SliderComponent id='slider' enable={false} value={50} /> |
| Enable | Method: enable <SliderComponent id='slider' value={30} /> public sliderObj = ${"#slider"}.ejSlider("instance"); sliderObj.enable(); |
Property: enabled <SliderComponent id='slider' enable={true} value={50} /> |
| Set Value | Method: setValue(value ,[enableAnimation]) <SliderComponent id='slider' value={30} /> public sliderObj = ${"#slider"}.ejSlider("instance"); sliderObj.setValue(50); |
Property: value <SliderComponent id='slider' value={this.state.value} /> this.setState({value: 100}); |
| Get Value | Method: getValue() <SliderComponent id='slider' value={30} /> public sliderObj = ${"#slider"}.ejSlider("instance"); sliderObj.getValue(); |
Property: value <SliderComponent id='slider' value={30} /> public sliderValue = this.sliderObj.value; |
| Destroy | Not Applicable | Method: destroy() <SliderComponent id='slider' value={30} /> public sliderValue = this.sliderObj.destroy(); |
| Change | Event: change public change(args) { } <SliderComponent id='slider' value={30} change={this.change} /> |
Event: changed public changed(args): void { }; <SliderComponent id='slider' value={30} changed={this.changed} /> |
| Create | Event: create public create(args) { } <SliderComponent id='slider' value={30} create={this.create} /> |
Event: created public created(args): void { }; <SliderComponent id='slider' value={30} created={this.created} /> |
| Slide | Event: slide public slide(args) { } <SliderComponent id='slider' value={30} slide={this.slide} /> |
Event: change public change(args): void { }; <SliderComponent id='slider' value={30} change={this.change} /> |
| Start | Event: start public start(args) { } <SliderComponent id='slider' value={30} start={this.start} /> |
Event: created public created(args): void { }; <SliderComponent id='slider' value={30} created={this.created} /> |
| Stop | Event: stop public stop(args) { } <SliderComponent id='slider' value={30} stop={this.stop} /> |
Event: changed public changed(args): void { }; <SliderComponent id='slider' value={30} changed={this.changed} /> |
| Rendered Ticks | Not Applicable | Event: renderedTicks public renderedTicks(args): void { }; <SliderComponent id='slider' value={30} renderedTicks={this.renderedTicks} /> |