• Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

JavaScript I am trying to create sliders to effect the font size, font weight, and font kerning

M

mikconwell

New Coder
I am new to javascript and am trying to make this code to effect a certain section of my page, but I cant seem to get it right. can anyone help me out? I have been pulling from stackoverflow and places like that, but nothing is working correctly.
 
Sort by date Sort by votes
Something like this:
HTML: 
<html>

  <style>
    #text {
      font-family: Calibri;
      font-size: 15px;
      font-weight: 200;
    }
  </style>

  <body>
    <p id="text">Some Text</p><br>  <!--text to change size, weight, and kerning-->
    Font Size: <input type="range" min="1" max="100" value="20" id="sliderSize"><br>  <!-- type="range" is the slider, min="1" & max="100" is the minimum and maximum value of the slider, and value="20" is the default position of the slider -->
    Font Weight: <input type="range" min="1" max="100" value="20" id="sliderWeight"><br>
    Font Kerning: <input type="range" min="1" max="100" value="20" id="sliderKerning">
  </body>

  <script>
    const sliderSize = document.getElementById("sliderSize");
    const sliderWeight = document.getElementById("sliderWeight");
    const sliderKerning = document.getElementById("sliderKerning");
    const font = document.getElementById("text");

    sliderSize.oninput = function() {
      if (this.value > 95) {
        font.style.fontSize = 55px;
      }
      else if (this.value > 85) {
        font.style.fontSize = 50px;
      }
      else if (this.value > 75) {
        font.style.fontSize = 45px;
      }
      else if (this.value > 65) {
        font.style.fontSize = 40px;
      }
      else if (this.value > 55) {
        font.style.fontSize = 35px;
      }
      else if (this.value > 45) {
        font.style.fontSize = 30px;
      }
      else if (this.value > 35) {
        font.style.fontSize = 25px;
      }
      else if (this.value > 25) {
        font.style.fontSize = 20px;
      }
      else if (this.value > 15) {
        font.style.fontSize = 15px;
      }
      else if (this.value > 5) {
        font.style.fontSize = 10px;
      }
      else {
        font.style.fontSize = 5px;
      }
    };

    sliderWeight.oninput = function() {  /*Calibri doesn't have many font weights, but you can try it with another font*/
      if (this.value > 95) {
        font.style.fontWeight = 1000;
      }
      else if (this.value > 85) {
        font.style.fontWeight = 900;
      }
      else if (this.value > 75) {
        font.style.fontWeight = 800;
      }
      else if (this.value > 65) {
        font.style.fontWeight = 700;
      }
      else if (this.value > 55) {
        font.style.fontWeight = 600;
      }
      else if (this.value > 45) {
        font.style.fontWeight = 500;
      }
      else if (this.value > 35) {
        font.style.fontWeight = 400;
      }
      else if (this.value > 25) {
        font.style.fontWeight = 300;
      }
      else if (this.value > 15) {
        font.style.fontWeight = 200;
      }
      else if (this.value > 5) {
        font.style.fontWeight = 100;
      }
      else {
        font.style.fontWeight = 0;
      }
    };

    sliderKerning.oninput = function() {  /*Calibri also doesn't have kerning data, but you can try it with another font*/
      if (this.value > 95) {
        font.style.fontKerning = 100;
      }
      else if (this.value > 85) {
        font.style.fonKerningt = 90;
      }
      else if (this.value > 75) {
        font.style.fontKerning = 80;
      }
      else if (this.value > 65) {
        font.style.fontKerning = 70;
      }
      else if (this.value > 55) {
        font.style.fontKerning = 60;
      }
      else if (this.value > 45) {
        font.style.fontKerning = 50;
      }
      else if (this.value > 35) {
        font.style.fontKerning = 40;
      }
      else if (this.value > 25) {
        font.style.fontKerning = 30;
      }
      else if (this.value > 15) {
        font.style.fontKerning = 20;
      }
      else if (this.value > 5) {
        font.style.fontKerning = 10;
      }
      else {
        font.style.fontKerning = 0;
      }
    }; /*I don't even know how to use kerning, but I guess this should work*/
  </script>

</html>
 
Last edited:
Upvote 0 Downvote

New Threads

Latest posts

Share this page

Buy us a coffee!

300x250
Top Bottom