Jump to content

Problem with creating a dynamic range slider to change the font size, with JavaScript.


Recommended Posts

Hello, I attached the code that I used for the slider. I'm using p5.js.

It doesn't work if I insert separately the JS code in the sketch.js page.


  <input type="range" min="1" max="100" value="50" class="slider" id="myRange">

  <p id="demo">Value: </p>


var slider = document.getElementById("myRange");
var output = document.getElementById("demo");

slider.oninput = function() {
  output.style.fontSize = slider.value + "px";


Thank you all!

Link to comment
Share on other sites

If the <script> tag is before the elements in your document then it won't have access to the elements because they haven't been parsed by the browser yet.

I recommend putting <script> tags at the bottom of the page, right before the closing </body> tag.

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...