Range in EJ2 JavaScript Progressbar control

10 May 20232 minutes to read

Range represents the entire span of the ProgressBar and can be defined using the minimum and maximum properties.

var linearProgress1 = new ej.progressbar.ProgressBar({
  type: 'Linear',
        trackThickness: 24,
        progressThickness: 24,
        value: 90,
        minimum: 10,
        maximum:90,
        showProgressValue: true,
        cornerRadius: 'Round',
        labelStyle: {
            color: '#FFFFFF'
        },
        animation: {
            enable: true,
            duration: 2000,
            delay: 0,
        }
  });
  linearProgress1.appendTo('#percentage');
<!DOCTYPE html><html lang="en"><head>
    <title>Essential JS 2 Toast</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript Toolbar Controls">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/29.1.33/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div class="row linear-parent">
            <div id="percentage"></div>     
       </div>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>