Ionic 4 | Add Screen Brightness Slider in Ionic 4 Application using Native plugin

Device’s screen brightness control is sometimes required to adjust screen visibility. A user generally adjusts screen brightness using quick menu by sliding down on the screen. In the Ionic application, we can programmatically adjust the screen brightness using a Native plugin.

Here we will create a new Ionic 4 application using latest Ionic CLI which will have Ionic’s Native Brightness plugin installed and a control range slider to adjust screen brightness from the application itself.

The brightness of the device screen ranges from 0 to 1, so here we will have a slider to adjust number value with minimum set to 0 and a maximum set to 1.

Let’s get started with a new Ionic 4 application.

Update Ionic CLI

First, make sure you have the latest version on Ionic CLI installed on your system. Run following CLI command to update Ionic CLI to the latest version


Create an Ionic Application

To demonstrate Ionic Screen Brightness we will create a new Ionic application. If you already have a running application just use that. Run following CLI command to create a new Ionic application with a blank template.

Install Cordova and Native Brightness Plugin

After creating and moving to app folder in CLI we will install Cordova and Ionic native plugin for Brightness to work in the application.

Run following CLI commands to install the native plugin.

Import Brightness Plugin in App Module

To use plugin we need import Brightness then add in providers array. Open app.module.ts file then make the following changes.

Add Brightness Control in Home Component

In we will add an Ionic UI component range slider <ion-range> with some available option parameters like min, max, step, debounce and ionChange event listener.

In file, we will simply get slider range value then call adjustBrightness() method which in turn call setBrightness method to take number value.

Now you can run this application real device to check functionality. Run the following command after connecting the device with a PC using a USB cable, this will directly run the app in the mobile device.

There are some other methods also available in Brightness service.

getBrightness: Reads the current brightness of the device display.

setKeepScreenOn: Keeps the screen on. Prevents the device from setting the screen to sleep.





Leave a Reply

Notify of