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

Html.EJ().Slider("slider").MaxValue(50) 		Property: Max

@Html.EJS().Slider("slider").Max(50)
Min value Property: MinValue

Html.EJ().Slider("slider").MinValue(50) 		Property: Min

@Html.EJS().Slider("slider").Min(50)
Step Property: IncrementStep, LargeStep, SmallStep, ShowSmallTicks

Html.EJ().Slider("slider").IncrementStep(20).LargeStep(20)
.SmallStep(10).ShowSmallTicks(true).ShowScale(true) 		Property: Ticks

@Html.EJS().Slider("slider").Ticks(new SliderTicksData { ShowSmallTicks = true, LargeStep = 20, SmallStep = 5, Placement = Placement.After })
Type Property: SliderType

Html.EJ().Slider("slider").SliderType(SlideType.Range) 		Property: Type

@Html.EJS().Slider("slider").Type(SliderType.Range)
Tooltip Property: ShowTooltip

Html.EJ().Slider("slider").ShowTooltip(true) 		Property: Tooltip

@Html.EJS().Slider("slider").Tooltip(new SliderTooltipData { Placement = TooltipPlacement.After, IsVisible = true })
RTL Property: EnableRTL

Html.EJ().Slider("slider").EnableRTL(true) 		Property: EnableRtl

@Html.EJS().Slider("slider").EnableRtl(true)
Custom values Not Applicable Property: CustomValues

String[] values = { "Mon", "Tue", "Wed" };
ViewBag.customValues = values;

@Html.EJS().Slider("slider").CustomValues(ViewBag.customValue)
Limit the slider movement Not Applicable Property: Limits

@Html.EJS().Slider("slider").Limits(new SliderLimitData { Enabled = true, MinStart = 20, MinEnd = 40 })
Disable Method: disable

@Html.EJ().Slider("slider")

var sliderObj = $("#slider").ejSlider("instance");
sliderObj.disable(); 		Property: Enabled

@Html.EJS().Slider("slider")

var sliderObj = document.getElementById('slider').ej2_instances[0];
sliderObj.enabled = false;
Enable Method: enable

@Html.EJ().Slider("slider")

var sliderObj = $("#slider").ejSlider("instance");
sliderObj.enable(); 		Property: Enabled

@Html.EJ().Slider("slider").Enabled(false)

var sliderObj = document.getElementById('slider').ej2_instances[0];
sliderObj.enabled = true;
Set Value Method: setValue(value ,[enableAnimation])

@Html.EJ().Slider("slider")

var sliderObj = $("#slider").ejSlider("instance");
sliderObj.setValue(50); 		Property: value

@Html.EJS().Slider("slider").Enabled(false)

var sliderObj = document.getElementById('slider').ej2_instances[0];
sliderObj.value = 30;
Get Value Method: getValue()

@Html.EJ().Slider("slider")

var sliderObj = $("#slider").ejSlider("instance");
sliderObj.getValue(); 		Property: value

@Html.EJS().Slider("slider").Value(50)

var sliderObj = document.getElementById('slider').ej2_instances[0];
var value = sliderObj.value;
Destroy Not Applicable Method: destroy()

@Html.EJS().Slider("slider").Value(50)

var sliderObj = document.getElementById('slider').ej2_instances[0];
sliderObj.destroy();
Change Event: Change

@Html.EJ().Slider("slider").ClientSideEvents(e => e.Change("onChange"))

function onChange(args) { } 		Event: Changed

@Html.EJS().Slider("slider").Changed("onChanged")

function onChanged(args) { }
Create Event: Create

@Html.EJ().Slider("slider").ClientSideEvents(e => e.Create("onCreate"))

function onCreate(args) { } 		Event: Created

@Html.EJS().Slider("slider").Created("onCreated")

function onCreated(args) { }
Slide Event: Slide

@Html.EJ().Slider("slider").ClientSideEvents(e => e.Slide("onSlide"))

function onSlide(args) { } 		Event: Change

@Html.EJS().Slider("slider").Change("onChange")

function onChange(args) { }
Start Event: Start

@Html.EJ().Slider("slider").ClientSideEvents(e => e.Start("onStart"))

function onStart(args) { } 		Event: Created

@Html.EJS().Slider("slider").Created("onCreated")

function onCreated(args) { }
Stop Event: Stop

@Html.EJ().Slider("slider").ClientSideEvents(e => e.Stop("onStop"))

function onStop(args) { } 		Event: Changed

@Html.EJS().Slider("slider").Changed("onCreated")

function onChanged(args) { }
Rendered Ticks Not Applicable Event: RenderedTicks

@Html.EJS().Slider("slider").RenderedTicks("onRenderedTicks")

function onRenderedTicks(args) { }