JSFiddle - React, Tailwind, and code Playground

Font size to containing box. CSS Javascript with fine tune range slider window resize aware

by Andrew Pougher

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css">
<input type="range" id="fSlider" min="12" max="200">
<div id="test"><span>word word word word word word word word word word word word word word word word word word . 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 </span></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js"></script>

CSS

body {
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}

#test span {
  border: 1px solid #ddd;
  position: absolute;
  //visibility: hidden;
  height: auto;
  width: auto;
  white-space: pre-wrap;
  /* css-3 */
  white-space: -moz-pre-wrap;
  /* Mozilla, since 1999 */
  white-space: -pre-wrap;
  /* Opera 4-6 */
  white-space: -o-pre-wrap;
  /* Opera 7 */
  word-wrap: break-word;
  word-break: break-all;
  /* webkit */
  white-space: pre\9;
  margin: 40px;
  min-width: 100px;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}


/* less than 900*/

@media screen and (max-width: 900px) {
  body {
    background: pink;
  }
  #test span {
    margin: 20px;
  }
}

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;
...

JavaScript

$(document).ready(function() {

  function txtsiz(w) {

    var test = document.getElementById("test");

    var height = (test.clientHeight + 1) + "px";
    var width = (test.clientWidth + 1);
    test.firstChild.style.fontSize = w / 10 + "px";
    console.log(height + "__" + width + "__" + w + "px");
    $("#test").css('width', w + "px");
    $('#fSlider').val(w / 10);
  }
  // adjust on the fly
  $(window).on("resize", function(event) {
    txtsiz($(this).width());
  });
  // initial setup
  txtsiz($(window).width());


  $('#fSlider').on('change', function() {
    updatesizes(parseInt($('#fSlider').val()), parseInt($('#chanceSlider').val()));
  });
  var updatesizes = function(sz, lh) {
    $(" #test span").css({
      'font-size': sz + "px",
      'line-height': lh / 1.5 + "px"
    });

  }

  $("#test span").draggable()
    .resizable({
       resize: function(evt, ui) {
  var ww = parseInt($("#test span").width());
      $("#test span").css("font-size",ww/10+"px")   
          $('#fSlider').val(ww / 10);
console.log( ww/10+"px")
 
       },
      aspectRatio: true,
  })



});

/* 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');