Edit on
<div class="slider_wrap">
  <div id="slider"></div>
</div>

<div class="currentSize">Current html font size: <code>16px</code></div>

<div class="boxWrap">
  <div class="box px">
    <p>Using 'px' unit</p>
  </div>
  <div class="width">Current width: </div>
  <code>160px</code>
</div>

<div class="boxWrap">
  <div class="box rem">
    <p>Using 'rem' unit</p>
  </div>
  <div class="width">Current width: </div>
  <code class="flex_width">160px</code>
</div>

<div class="boxWrap">
  <div class="box em">
    <p>Using 'em' unit</p>
  </div>
  <div class="width">Current width: </div>
  <code class="flex_width">160px</code>
</div>
.slider_wrap {
  margin: 1rem;
  width: 30rem;
}
.currentSize {
  margin: 1rem;
}
.boxWrap {
  float: left;
  margin-left: 0.5rem;
  text-align: center; 
}
.box {
  color: white;
}
.box p {
  display: inline-block;
  margin-top: 15%;
}
.px {
  width: 160px;
  height: 160px;
  background: #1abc9c;
}
.rem {
  width: 10rem;
  height: 10rem;
  background: #4aa3df;
}
.em {
  width: 10em;
  height: 10em;
  background: #34495e;
}
.width {
  margin-top: 0.5rem;
}
$(function() {
  $( "#slider" ).slider({
    min: 9,
    max: 42,
    value: 16
  });
  $( "#slider" ).on( "slidechange", function( event, ui ) {
    $('html').css('font-size', ui.value + 'px');
    $('.currentSize > code').html(ui.value + 'px');
    $('.flex_width').html((ui.value * 10) + 'px');
  });
});
Rerun