Value and Ranges

The ProgressBar provides option for setting its value or a range of values and for indicating the progress of an ongoing task.

  • To set the value of the ProgressBar, use its value option.
  • To define the start and end values of the range, use the min and max ProgressBar settings respectively.
  • To indicate that a task is still in progress, use the indeterminate configuration.
    selector: 'my-app',
    template: `
        <div class="wrapper">
          <input class="k-checkbox" type="checkbox" id="indeterminate" [(ngModel)]="indeterminate" />
          <label class="k-checkbox-label" [attr.for]="'indeterminate'">Toggle the indeterminate state</label>
                Value: <input type="number" max="10" min="-10" [(ngModel)]="value" />
        <span>Min: {{min}}</span>
        <span>Max: {{max}}</span>
    styles: [`
      .wrapper {
        padding-bottom: 20px;
class AppComponent {
    public value = 0;
    public indeterminate = false;
    public min = -10;
    public max = 10;

In this article