CODEWITHSUNDEEP
cssionic-frameworkion-range-slider
Titus
Titus

Reputation: 349

How to fix --bar-background-active: not working?

I am trying to customize the ion-range in my app based on the wireframe. I tried to use --bar-background-active but seems not working. Please refer to my codes below. I removed the color="primary" in the ion-range attribute since the bar-background is blue also, I need to change it to gray to align with the wireframe. Hope you can help me. Thank you

Wireframe enter image description here

Actual enter image description here

.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 info

  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

Upvotes: 0

Views: 272

Answers (1)

Thanh Tran
Thanh Tran

Reputation: 71

I have the same issue and I resolve the problem that you need to remove the color attribute. And it works perfectly :D. Good luck

enter image description here

Upvotes: 0

Related Questions