Getting started in EJ2 JavaScript Range slider control
25 Nov 20237 minutes to read
The Essential JS 2 for JavaScript (global script) is an ES5 formatted pure JavaScript framework which can be directly used in latest web browsers.
control Initialization
The Essential JS 2 JavaScript controls can be initialized by using either of the following ways.
- Using local script and style references in a HTML page.
- Using CDN link for script and style reference.
Using local script and style references in a HTML page
Step 1: Create an app folder myapp
for Essential JS 2 JavaScript controls.
Step 2: You can get the global scripts and styles from the Essential Studio JavaScript (Essential JS 2) build installed location.
Syntax:
Script:
**(installed location)**\Syncfusion\Essential Studio\JavaScript - EJ2\{RELEASE_VERSION}\Web (Essential JS 2)\JavaScript\{PACKAGE_NAME}\dist\global\{PACKAGE_NAME}.min.js
Styles:
**(installed location)**\Syncfusion\Essential Studio\JavaScript - EJ2\{RELEASE_VERSION}\Web (Essential JS 2)\JavaScript\{PACKAGE_NAME}\styles\material.css
Example:
Script:
C:\Program Files (x86)\Syncfusion\Essential Studio\JavaScript - EJ2\16.3.0.17\Web (Essential JS 2)\JavaScript\ej2-inputs\dist\global\ej2-inputs.min.js
Styles:
C:\Program Files (x86)\Syncfusion\Essential Studio\JavaScript - EJ2\16.3.0.17\Web (Essential JS 2)\JavaScript\ej2-inputs\styles\material.css
The below located script and style file contains all Syncfusion JavaScript (ES5) UI control resources in a single file.
Scripts:
**(installed location)**\Syncfusion\Essential Studio\JavaScript - EJ2\{RELEASE_VERSION}\Web (Essential JS 2)\JavaScript\ej2\dist\ej2.min.js
Styles:
**(installed location)**\Syncfusion\Essential Studio\JavaScript - EJ2\{RELEASE_VERSION}\Web (Essential JS 2)\JavaScript\ej2\material.css
Step 3: Create a folder myapp/resources
and copy/paste the global scripts and styles from the above installed location to myapp/resources
location.
Step 4: Create a HTML page (index.html) in myapp
location and add the Essentials JS 2 script and style references.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Essential JS 2</title>
<!-- Essential JS 2 material theme -->
<link href="resources/material.css" rel="stylesheet" type="text/css"/>
<!-- Essential JS 2 Inputs's global and dependent script -->
<script src="resources/ej2-base.min.js" type="text/javascript"></script>
<script src="resources/ej2-inputs.min.js" type="text/javascript"></script>
</head>
<body>
</body>
</html>
Step 5: Now, add the Slider
element and initiate the Essential JS 2 Slider
control in the index.html
by using following code
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Essential JS 2</title>
<!-- Essential JS 2 material theme -->
<link href="resources/material.css" rel="stylesheet" type="text/css"/>
<!-- Essential JS 2 Inputs's global and dependent script -->
<script src="resources/ej2-base.min.js" type="text/javascript"></script>
<script src="resources/ej2-inputs.min.js" type="text/javascript"></script>
</head>
<body>
<!-- Add the HTML <div> element -->
<div id='element'></div>
<script>
// Initialize Essential JS 2 JavaScript Slider control
var sliderInstance = new ej.inputs.Slider({ value: 30 });
//Render initialized Slider
sliderInstance.appendTo("#element");
</script>
</body>
</html>
Step 6: Now, run the index.html
in web browser, it will render the Essential JS 2 Slider control.
Using CDN link for script and style reference
Step 1: Create an app folder myapp
for the Essential JS 2 JavaScript controls.
Step 2: The Essential JS 2 control’s global scripts and styles are already hosted in the below CDN link formats.
Syntax:
Script:
https://cdn.syncfusion.com/ej2/{PACKAGE_NAME}/dist/global/{PACKAGE_NAME}.min.js
Styles:
https://cdn.syncfusion.com/ej2/{PACKAGE_NAME}/styles/material.css
Example:
Script:
https://cdn.syncfusion.com/ej2/ej2-inputs/dist/global/ej2-inputs.min.js
Styles:
https://cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css
Step 3: Create a HTML page (index.html) in myapp
location and add the CDN link references. Now, add the Slider
element and initiate the Essential JS 2 Slider
control in the index.html
by using following code.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Essential JS 2</title>
<!-- Essential JS 2 material theme -->
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-base/styles/material.css" rel="stylesheet" type="text/css"/>
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-buttons/styles/material.css" rel="stylesheet" type="text/css"/>
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-popups/styles/material.css" rel="stylesheet" type="text/css"/>
<link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-inputs/styles/material.css" rel="stylesheet" type="text/css"/>
<!-- Essential JS 2 Input's global script -->
<script src="https://cdn.syncfusion.com/ej2/27.2.2/ej2-base/dist/global/ej2-base.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/27.2.2/ej2-buttons/dist/global/ej2-buttons.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/27.2.2/ej2-popups/dist/global/ej2-popups.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/27.2.2/ej2-inputs/dist/global/ej2-inputs.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<!-- Add the HTML <div> element -->
<div id='element'></div>
<script>
// Initialize Essential JS 2 JavaScript Slider control
var sliderInstance = new ej.inputs.Slider({value: 30});
//Render initialized Slider
sliderInstance.appendTo("#element");
</script>
</body>
</html>
#container {
visibility: hidden;
}
#loader {
color: #008cff;
font-family: 'Helvetica Neue','calibiri';
font-size: 14px;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
.wrap {
box-sizing: border-box;
height: 140px;
margin: 100px auto;
padding: 30px 10px;
width: 260px;
}
Step 4: Now, run the index.html
in web browser, it will render the Essential JS 2 Slider
control.
Need to refer dependency control styles and scripts as like above example. We can also use CRG to generate combined control styles.