Ej1 api migration in React Range slider component

30 Jan 20235 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 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} />