CODEWITHSUNDEEP
angularionic-frameworksass
Sergey Rudenko
Sergey Rudenko

Reputation: 9227

how to apply styles to particular Ionic components without overriding the others

I have the range component (below). And I want to style it such that its bar's height was 50px and had gradient color.

I found in the docs how to do that via theme\variables.scss (I modify this var here: $range-ios-bar-height & $range-ios-bar-background-color), but then all of my range components will get the change of style, but I need it only for a particular instance of range element.

How can I apply these changes only to a particular ion-range?

<ion-range min="0" max="100" snaps=false pin="true" color="secondary" [(ngModel)]="colorSlider">
    <ion-icon range-left small name="palette"></ion-icon>
    <ion-icon range-right name="palette"></ion-icon>
</ion-range>

Upvotes: 2

Views: 1810

Answers (1)

VICTOR
VICTOR

Reputation: 1942

You can just create a class attribute to the element so that you only change the style with the same class name.

<ion-range class="customize" min="0" max="100" snaps=false pin="true" color="secondary" [(ngModel)]="colorSlider">
    <ion-icon range-left small name="palette"></ion-icon>
    <ion-icon range-right name="palette"></ion-icon>
</ion-range>

And then in variable.scss(or the corresponding scss file):

ion-range{
   &.customize{
      height: 20px; 
   }
}

Therefore, only the ion-range with class customize will have height: 20px, for others are using default height.

You cannot override variables in sass for only one component, as it against the point of the sass variables, which meant to be global settings.

Upvotes: 3

Related Questions