- Define the <div> tag consisting the <p> tag, slider & 3 buttons.
- In the case of moving the slider, again use DOM to access the value of the slider that has been set by the user and use this value as the font-size value for the <div> tag.
We will follow the above approach to build the font size controller & will make it stepwise manner.
Step 1: Create a simple HTML page with three buttons, a div consisting of a paragraph, and a slider. We are going to change the font size of this div content using the buttons or the slider. We will apply only the essential CSS stylings.
For the Slider functionality, a normal non-parameterized function will be created for the onChange event. Using the Document object module (DOM), we can access the value of the slider that has been set by the user and use this value as the font-size value for our <div> tag.
Step 3: Add the appropriate functions to the event attributes of the button and the slider. Click the buttons or move the slider and you should see the font size of the div contents to be changing.