Ej1 api migration in EJ2 JavaScript Range Slider control

7 May 20255 minutes to read

This article describes the API migration process of Range Slider control from Essential® JS 1 to Essential® JS 2

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