I have the following html code [settings.html]
<ion-item>
<ion-range min="1" max="4" step="1" snaps="true" [(ngModel)]="saturation" color="grey">
<ion-label range-left style="font-size: 12px;">A</ion-label>
<ion-label range-right style="font-size: 20px;">A</ion-label>
</ion-range>
</ion-item>
How do I change the font size of all pages dynamically in the settings.ts file by dragging the range?
You can use an event that issues the variable for all the pages being accessed. something like this: no app.compoenent
import { Events } from 'ionic-angular';
constructor(public events: Events) {}
function changeFont(font) {
events.publish('font:change', font);
}
Then in your compoenent you put
public font:any;
events.subscribe('font:change', (font) => {
this.font = font
});
And in your template view it can be in body, content which encompasses the entire project you place
style="font-size:{font}px"
With adaptations for your project, it should work