Migration from Essential JS 1

17 Feb 20225 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" max-value="100" /> 		Property: max
<ejs-slider id="slider" max="100" />
Min value Property: minValue
<ej-slider id="slider" min-value="30" /> 		Property: min
<ejs-slider id="slider" min="10" />
Step Property: incrementStep, largeStep, smallStep, showSmallTicks
<ej-slider id="slider" increment-step="20" small-step="5" large-step="40" show-small-ticks="true" show-scale="true" /> 		Property: ticks
<ejs-slider id="slider" ticks="new Syncfusion.EJ2.Inputs.SliderTicksData { Placement=Syncfusion.EJ2.Inputs.Placement.After, LargeStep=20, SmallStep=10, ShowSmallTicks=true }" />
Type Property: sliderType
<ej-slider id="slider" slider-type="Range" /> 		Property: type
<ejs-slider id="slider" type="Range" />
Tooltip Property: showTooltip
<ej-slider id="slider" show-tooltip="true" /> 		Property: tooltip
<ejs-slider id="slider" tooltip="new Syncfusion.EJ2.Inputs.SliderTooltipData { Placement=Syncfusion.EJ2.Inputs.TooltipPlacement.After, IsVisible=true, ShowOn=Syncfusion.EJ2.Inputs.TooltipShowOn.Always }" />
RTL Property: enableRTL
<ej-slider id="slider" enable-rtl="true" /> 		Property: enableRtl
<ejs-slider id="slider" enableRtl="true" />
Custom values Not Applicable Property: customValues
String[] values = { "Mon", "Tue", "Wed" };
ViewBag.customValues = values;

<ejs-slider id="slider" customValues="@ViewBag.customValues" />
Limit the slider movement Not Applicable Property: limits
<ejs-slider id="slider" limits="new Syncfusion.EJ2.Inputs.SliderLimitData {Enabled=true, MinEnd=30, MinStart=10 }" />
Disable Method: disable
<ej-slider id="slider" />

var sliderObj = $("#slider").ejSlider("instance");
sliderObj.disable(); 		Property: enabled
<ejs-slider id="slider" />

var sliderObj = document.getElementById('slider').ej2_instances[0];
sliderObj.enabled = false;
Enable Method: enable
<ej-slider id="slider" />

var sliderObj = $("#slider").ejSlider("instance");
sliderObj.enable(); 		Property: enabled
<ejs-slider id="slider" enabled="false" />

var sliderObj = document.getElementById('slider').ej2_instances[0];
sliderObj.enabled = true;
Set Value Method: setValue(value ,[enableAnimation])
<ej-slider id="slider" />

var sliderObj = $("#slider").ejSlider("instance");
sliderObj.setValue(50); 		Property: value
<ejs-slider id="slider" />

var sliderObj = document.getElementById('slider').ej2_instances[0];
sliderObj.value = 30;
Get Value Method: getValue()
<ej-slider id="slider" />

var sliderObj = $("#slider").ejSlider("instance");
sliderObj.getValue(); 		Property: value
<ejs-slider id="slider" value="50" />

var sliderObj = document.getElementById('slider').ej2_instances[0];
var value = sliderObj.value;
Destroy Not Applicable Method: destroy()
<ejs-slider id="slider" value="50" />

var sliderObj = document.getElementById('slider').ej2_instances[0];
sliderObj.destroy();
Change Event: change
<ej-slider id="slider" change="onChange" />

function onChange(args) { } 		Event: changed
<ejs-slider id="slider" changed="onChanged" />

function onChanged(args) { }
Create Event: create
<ej-slider id="slider" create="onCreate" />

function onCreate(args) { } 		Event: created
<ejs-slider id="slider" created="onCreated" />

function onCreated(args) { }
Slide Event: slide
<ej-slider id="slider" slide="onSlide" />

function onSlide(args) { } 		Event: change
<ejs-slider id="slider" change="onChange" />

function onChange(args) { }
Start Event: start
<ej-slider id="slider" start="onStart" />

function onStart(args) { } 		Event: created
<ejs-slider id="slider" created="onCreated" />

function onCreated(args) { }
Stop Event: stop
<ej-slider id="slider" stop="onStop" />

function onStop(args) { } 		Event: changed
<ejs-slider id="slider" changed="onChanged" />

function onChanged(args) { }
Rendered Ticks Not Applicable Event: renderedTicks
<ejs-slider id="slider" renderedTicks="onRenderedTicks" />

function onRenderedTicks(args) { }