Adjust font sizes with a range component

I would like to setup a setting page to control the font size of all pages, the setting page.html is as below :

<ion-item>
      <ion-range min="-100" step="10" snaps="true" [(ngModel)]="text">
        <ion-label range-left class="small-text">A</ion-label>
        <ion-label range-right>A</ion-label>
      </ion-range>
</ion-item>

I don’t have any idea how to do the rest. May anyone give some hints?
Many thanks.

Set different classes (each of them having different font sizes applied by css) on your body with NgClass, depending on the selected value of your ion-range element.

1 Like

Thanks for the suggestion of using NgClass, but I am a newbie to apply it on ionic2 from angular2. I have searched lots of Google, but I couldn’t find examples of ionic2 using NgClass with range component. Hope could find some references soon.

You first need to import the NgClass directive like this:

import {NgClass} from '@angular/common';

Then, declare the use of the directive in your component definition:

@Component({
    ..., 
    directives: [NgClass],
})

In your template, you can use NgClass this way:

[ngClass]="{your-classname: bindedPropertyName, other-classname: ...}"

Where ‘your-classname’ is the name of the class you want to define, and ‘bindedPropertyName’ is the name of the property you defined in your component. What I just did here is just describing what is shown the the example given here (the documentation of NgClass I gave you above). Just bind your ion-range model on this property, and define the conditions when the class must appear in your template in the NgClass directive.

You can put conditions in NgClass, so basically you could end with something like this:

[ngClass]="{small: fontSize===1, medium: fontSize===2, big: fontSize===3, ...}"

Where fontSize could be the name of the property you binded your ion-range on, and supposing that you can only have 3 different values. Adapt according to your needs. Hope it can help you to see more clear.

1 Like

@schankam Really big thanks !

I have tried as below, but it’s not worked, sorry that I am still a newbie, could you please suggest where I did wrongly? Thanks.

fontsize.html
`
<ion-range min=“1” step=“3” snaps=“true” [(ngModel)]=“fontSize” class=“fontSize” [ngClass]="{small: fontSize===1, medium: fontSize===2, big: fontSize===3}">
A
A

test font size change

`

fontsize.scss
.small{ font-size: 10px; } .medium{ font-size: 20px; } .big{ font-size: 30px; }

fontsize.ts
import {NgClass} from '@angular/common'; @Component({ templateUrl: 'build/pages/fontsize/fontsize.html', directives: [NgClass], })

This

[ngClass]="{small: fontSize===1, medium: fontSize===2, big: fontSize===3}

should be on the element where you want to apply the css property, not on the ion-range element !

So in your case it should be:

<p class="fontSize" [ngClass]="{small: fontSize===1, medium: fontSize===2, big: fontSize===3}>test font size change</p>

Also you should set the “max” attribute to 3 on your ion-range, not the step attribute:

<ion-range min="1" max="3" snaps="true" [(ngModel)]="fontSize" class="fontSize">
1 Like

It works !! Thank you so so so much again :smiley:

Welcome :slight_smile:

1 Like