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

Question

我正在尝试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

Answer 1

我有同样的问题，我解决了您需要删除该color属性的问题。它完美地工作：D。祝你好运