在Angular中，您可以使用Angular Material库中的进度条组件来创建范围指示器。

首先，确保您已安装了Angular Material库。您可以通过运行以下命令来安装它：

npm install @angular/material

然后，在您的模块文件中导入和添加MatProgressBarModule：

import { MatProgressBarModule } from '@angular/material/progress-bar';

@NgModule({
  imports: [
    // other imports
    MatProgressBarModule
  ],
  // other configurations
})
export class YourModule { }

接下来，在您的组件模板中使用来创建进度条，并通过value和mode属性来控制进度和样式：

mode属性用于指定进度条的样式，可以是determinate（确定性进度）或indeterminate（不确定性进度）。

value属性用于指定进度的值。在您的组件中，您可以使用变量来跟踪进度，并将其绑定到value属性上。例如：

export class YourComponent {
  progressValue: number = 50; // 初始进度为50%

  // 在某个地方更新进度值
  updateProgress() {
    this.progressValue += 10; // 增加10%的进度
  }
}

这样，当progressValue的值改变时，进度条的进度也会相应改变。

对于Bootstrap，您可以使用Bootstrap的进度条组件来创建范围指示器。

首先，确保您已将Bootstrap样式表添加到您的项目中。您可以通过将以下CSS链接标签添加到您的index.html文件中来获取Bootstrap样式：

然后，在您的组件模板中使用

  

    {{progressValue}}%
  

export class YourComponent {
  progressValue: number = 50; // 初始进度为50%

  // 在某个地方更新进度值
  updateProgress() {
    this.progressValue += 10; // 增加10%的进度
  }
}