如何修复 --bar-background-active: 不工作？

如何解决如何修复 --bar-background-active: 不工作？

我正在尝试根据线框自定义我的应用中的 ion-range。我尝试使用 --bar-background-active 但似乎不起作用。请参考我下面的代码。我删除了 color="primary" 中的 ion-range attribute，因为条形背景也是蓝色的，我需要将其更改为灰色以与线框对齐。希望您能够帮助我。谢谢

线框

实际

.html

<ion-range
    class="range-position"
    min="1"
    max="6"
    dualknobs="true"
    pin="false"
    snaps="true"
    ticks="false"
    //removed the color="primary"
    list="tickmarks"
    [(ngModel)]="range"
    (ionChange)="changeFunction($event)"
  >
  </ion-range>

.scss

  ion-range {
  --bar-background-active: #0e82c1;
  --bar-background: gray;
  --bar-height: 0.5px;
  --knob-size: 18px;
  display: block;
 }

离子信息

  Ionic:

  Ionic CLI                     : 6.13.0
  Ionic Framework               : @ionic/angular 5.4.3
  @angular-devkit/build-angular : 0.1000.8
  @angular-devkit/schematics    : 10.0.8
  @angular/cli                  : 10.0.8
  @ionic/angular-toolkit        : 2.3.3

  Cordova:

  Cordova CLI       : 10.0.0
  Cordova Platforms : android 8.1.0,ios 5.1.1
  Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0,cordova-plugin-ionic-webview 5.0.0,(and 21 other plugins)        

  Utility:

  cordova-res : not installed
  native-run  : not installed

  System:

  NodeJS : v15.3.0 
  npm    : 7.5.4
  OS     : Windows 10