JSFiddle - React, Tailwind, and code Playground

font size JS auto scale

by Andrew Pougher

HTML

<p></p>
<input type="range" id="chanceSlider" min="0" max="200" >
<input type="text" name="chance" id="chance" class="text" value="50">
<div id="container"><span>This is my text</span></div>

CSS

* {
  font-family: Myriad Pro;
}

#container {
  min-height: 50px;
  max-height: 100vh;
  width: 80vw;
  background-color: #eeeeee;
  padding: 10%;
  min-width: 150px;
}

#container span {
  -webkit-transition: all ease .6s;
  -moz-transition: all ease .6s;
  -o-transition: all ease .6s;
  transition: all ease .6s;
}

input[type=range] {
  /*removes default webkit styles*/
  -webkit-appearance: none;
  /*fix for FF unable to apply focus style bug */
  border: 1px solid transparent;
  /*required for proper track sizing in FF*/
  width: 300px;
}

input[type=range]::-webkit-slider-runnable-track {
  width: 300px;
  height: 8px;
  background: #ddd;
  border: none;
  border-radius: 0px;
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: none;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: lightblue;
  margin-top: -6px;
}

input[type=range]:focus {
  outline: none;
}

input[type=range]:focus::-webkit-slider-runnable-track {
  background: #ccc;
}

input[type=range]::-moz-range-track {
  width: 300px;
  height: 5px;
  background: #ddd;
  border: none;
  border-radius: 0px;
}

input[type=range]::-moz-range-thumb {
  border: none;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: lightblue;
}


/*hide the outline behind the border*/

input[type=range]:-moz-focusring {
  outline: 1px solid white;
  outline-offset: -1px;
}

input[type=range]::-ms-track {
  width: 300px;
  height: 5px;
  /*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
  background: transparent;
  /*leave room for the larger thumb to overflow with a transparent border */
  border-color: transparent;
  border-width: 6px 0;
  /*remove default tick marks*/
  color: transparent;
}

input[type=range]::-ms-fill-lower {
  background: #777;
  border-radius: 10px;
}

input[type=range]::-ms-fill-upper {
  background: #ddd;
  border-radius: 10px;
}

input[type=range]::-ms-thumb {
  border: none;
  height: 20px;
 ...

JavaScript

$(document).ready(function() {
  $(window).on('resize', function(e) {
    var fontSize = parseInt($("#container").width() / 4);
    $("p").html(fontSize);
    $("#chance").val(fontSize);
		updatesizes(fontSize,fontSize );
	 $('#chanceSlider, #chance').val(parseInt($("#container").width() / 4));
  });

  $('#chanceSlider').on('change', function() {
   $("p").html($('#chanceSlider').val());
    $("#chance").val($('#chanceSlider').val());
  updatesizes(parseInt($('#chanceSlider').val()), parseInt($('#chanceSlider').val()));
 });
  $('#chance').on('keyup', function() {
    $('#chanceSlider').val($('#chance').val());
      $("p").html($('#chance').val());
    updatesizes(parseInt($('#chance').val()), parseInt($('#chance').val()));
  });

var updatesizes = function(sz,lh){
 $("#container span").css({
      'font-size': sz + "px",
      'line-height': lh / 1.5 + "px"
    });

}

});







 	/* http://bit.ly/ARP71 */
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-4809804-1', 'auto');
  ga('send', 'pageview');