Setting Range

29 Aug 20171 minute to read

The range of the ProgressBar is set by using minimum and maximum values. The Minimum value specifies the value where the ProgressBar shows the process to have started. The Maximum value specifies the value where the process is completed. You can set the range by using the ‘minValue’ and ‘maxValue’ property.

In the HTML page, add a <div> element to render the ProgressBar widget.

  • HTML
  • <div class="control">
            <div id="progressbar"></div>
  • JS
  • // Add Range for the ProgressBar widget as follows.
    /// <reference path="tsfiles/jquery.d.ts" />
    /// <reference path="tsfiles/ej.web.all.d.ts" />
    module ProgressBarComponent {
        $(function () {
            var sample = new ej.ProgressBar($("#progressbar"),{
                        minValue: 40,
                        maxValue: 80,
                        value: 80,
                        height: 20,
                        width: 500
                    sample.setModel({ text: progress.getPercentage() + " % Completed" });

    The following screenshot displays the output.