Ej1 api migration in EJ2 TypeScript Range slider control

8 May 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
var sliderObj = new ej.Slider($(“#slider”),{
maxValue: 60
});		 Property: max
let slider: Slider = new Slider({
max : 100
});
slider.appendTo(‘#test’);
Min value Property: minValue
var sliderObj = new ej.Slider($(“#slider”),{
minValue: 60
});		 Property: min
let slider: Slider = new Slider({
min : 10
});
slider.appendTo(‘#test’);
Step Property: incrementStep, largeStep, smallStep, showSmallTicks
$(“#slider”).ejSlider({
incrementStep: 20,
smallStep: 5,
largeStep: 40,
showSmallTicks: true
});		 Property: ticks
let slider: Slider = new Slider({
ticks: { placement: ‘After’, largeStep: 20, smallStep: 10, showSmallTicks: true },
});
slider.appendTo(‘#test’);
Type Property: sliderType
var sliderObj = new ej.Slider($(“#slider”),{
sliderType: ej.SliderType.Default
});		 Property: type
let slider: Slider = new Slider({
type: ‘Range’
});
slider.appendTo(‘#test’);
Tooltip Property: showTooltip
var sliderObj = new ej.Slider($(“#slider”),{
showTooltip: true
});		 Property: tooltip
let slider: Slider = new Slider({
tooltip: { placement: ‘Before’, isVisible: true, showOn: ‘Always’ },
});
slider.appendTo(‘#test’);
RTL Property: enableRTL
var sliderObj = new ej.Slider($(“#slider”),{
enableRTL: false
});		 Property: enableRtl
let slider: Slider = new Slider({
enableRtl: false
});
slider.appendTo(‘#test’);
Custom values Not Applicable Property: customValues
let slider: Slider = new Slider({
customValues: [‘Mon’, ‘Tue’, ‘Wed’],
});
slider.appendTo(‘#test’);
Limit the slider movement Not Applicable Property: limits
let slider: Slider = new Slider({
type: ‘MinRange’,
limits: { enabled: true, minStart: 10, minEnd: 40 }
});
slider.appendTo(‘#test’);
Disable Method: disable
var sliderObj = $(“#slider”).data(“ejSlider”);
slider.disable();		 Property: enabled
let slider: Slider = new Slider({
value: 30
});
slider.appendTo(‘#test’);
slider.enabled =false;
Enable Method: enable
var sliderObj = $(“#slider”).data(“ejSlider”);
slider.enable();		 Property: enabled
let slider: Slider = new Slider({
value: 30,
enabled:false
});
slider.appendTo(‘#test’);
slider.enabled = true;
Set Value Method: setValue(value ,[enableAnimation])
var sliderObj = $(“#slider”).data(“ejSlider”);
slider.setValue(10);		 Property: value
let slider: Slider = new Slider({ });
slider.appendTo(‘#test’);
slider.value = 30;
Get Value Method: getValue()
var sliderObj = $(“#slider”).data(“ejSlider”);
slider.getValue();		 Property: value
let slider: Slider = new Slider({
Value:30
});
slider.appendTo(‘#test’);
slider.value;
Destroy Not Applicable Method: destroy()
let slider: Slider = new Slider({});
slider.appendTo(‘#test’);
slider. destroy();
Change Event: change
var sliderObj = new ej.Slider($(“#slider”),{
change: function (args) {}
});		 Event: changed
let slider: Slider = new Slider({
changed: function(e: Event): void { }
});
slider.appendTo(‘#test’);
Create Event: create
var sliderObj = new ej.Slider($(“#slider”),{
create: function (args) {}
});		 Event: created
let slider: Slider = new Slider({
created: function(e: Event): void { }
});
slider.appendTo(‘#test’);
Destroy Event: destroy
var sliderObj = new ej.Slider($(“#slider”),{
destroy: function (args) {}
});		 Method: destroy()
let slider: Slider = new Slider({
value:30
});
slider.appendTo(‘#test);
slider.destroy();
Slide Event: slide
var sliderObj = new ej.Slider($(“#slider”),{
slide: function (args) {}
});		 Event: change
let slider: Slider = new Slider({
change: function(e: Event): void { }
});
slider.appendTo(‘#test);
Start Event: start
var sliderObj = new ej.Slider($(“#slider”),{
start: function (args) {}
});		 Event: created
let slider: Slider = new Slider({
created: function(e: Event): void { }
});
slider.appendTo(‘#test);
Stop Event: stop
var sliderObj = new ej.Slider($(“#slider”),{
stop: function (args) {}
});		 Event: changed
let slider: Slider = new Slider({
changed: function(e: Event): void { }
});
slider.appendTo(‘#test);
Rendered Ticks Not Applicable Event: renderedTicks
let slider: Slider = new Slider({
renderedTicks: function(e: Event): void { }
});
slider.appendTo(‘#test);