Customizing Ionic UI Components CSS — using Chrome DevTools

In this tutorial, we will be customizing the Ionic Range UI component in Angular. Customizing is always harder when it comes to improvising the prebuild Ionic components. But we will make it easier using the Google Chrome DevTools — Elements panel. Before starting we will go through What Chrome Elements Panel is? and Why it is so much useful for customizing the Web View-based components ?.

What is Chrome DevTools — Elements Panel?

Chrome is quite famous for its debugging tools which help developers debug their Web Applications or any Web View-based application. Google Chrome provides various ways to debug the APP like we can debug UI components using Elements Panel, Logic related debugging can be done using Sources Panel, Network request related debugging can be done using Network Panel, Local Storage related debugging can be done using Application Panel. There are many more ways to debug our code, if you want to know more about this go to Google Developers Tools Blog. In this tutorial, we will use the Elements Panel to customize the Ionic Range component.

Chrome Elements Panel compiles the Ionic code and simply shows the components with its HTML and related CSS code. Now debugging the UI components is easier, we can simply tap on the component and debug the HTML or CSS.

What is Ionic 5?

You probably already know about Ionic, but I’m putting it here just for the sake of beginners. Ionic is a complete open-source SDK for hybrid mobile app development created by Max Lynch, Ben Sperry and Adam Bradley of Drifty Co. in 2013. Ionic provides tools and services for developing hybrid mobile apps using Web technologies like CSS, HTML5, and Sass. Apps can be built with these Web technologies and then distributed through native app stores to be installed on devices by leveraging Cordova.

So, in other words — If you create Native apps in Android, you code in Java. If you create Native apps in iOS, you code in Obj-C or Swift. Both of these are powerful but complex languages. With Cordova (and Ionic) you can write a single piece of code for your app that can run on both iOS and Android (and windows!), that too with the simplicity of HTML, CSS, and JS.

Ionic 5 Range component

Ionic 5 Range component is a basic range bar from which we can select the numbers in a way that look we drag the pointer to the desired number, But prebuild component have only a few features, so to change the design we will create a custom CSS file and import it into the index.html file.

Above is the default Ionic Range component and we will customize the above component to look like the below Range component. Our range component acts as a progress bar with many stages — like stage 1, stage 2, stage 3, etc

Customized CSS file of the Ionic Range Component, will be added in the Ionic project. The file will be added in the assets folder assets/range/range.css. In the below file, we have updated/changed the default CSS of the range component [In Ionic Framework] to the custom CSS. 

For example:- 

1. Modifying .range-wp .range-know-handle class changes the knob style in Ionic Range Component.
2. Modifying .range-md .range-bar class changes the Bar style in default Range Component.
3. Modifying .range-md .range-tick class changes the Tick subpart of the Range Component.

Above CSS can be customized, according to the small components of the Ionic Range Component below is the way we can inspect the small components of any Ionic Component (Ionic Range in this case). CSS file should be added to the index.html page using the link tag.

<link rel="stylesheet" href="assets/range/range.css">

Now to customize the Ionic Range Component, we will inspect the Range component using the Chrome Elements Panel. Below is code to add the HTML Range component in your view.

<ion-item no-lines>
    <ion-range disabled="true" (ionChange)="valueChange($event)" min="10" max="40" step="10" snaps="true"></ion-range>
    </ion-item>

Now to inspect the ion-range component, open the Elements Panel and tap on the range component. First, inspect the knob class you can modify the knob-handle class, In this case, the knob is made as a circle.

Now we can inspect the CSS in the Elements Panel:-

You can customize the size of the knob by changing the width and height of the know-handle class. If you want to change the CSS of range-slider, then inspect it by tapping on it.

To change the height or width of the range slider, you can inspect and modify that according to the needs.

Above is the case using which ion-range components can be inspected using the Elements panel, you can customize any component using this technique. Check our code above to know how we changed it for our purpose.

Conclusion

In this tutorial, we have seen how we can customize any of the prebuild Ionic components. Specific application themes require different customized components that can be inspected and modified using the custom CSS file. Now you can take the help of these tools and customize your own component styles.