<div>
<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' for all units</p>
</div>
<div class="width">Current width: </div>
<code>160px</code>
</div>
<div class="boxWrap">
<div class="box rem">
<p>Using 'rem' for font and 'px' for other units</p>
</div>
<div class="width">Current width: </div>
<code>160px</code>
</div>
<div class="boxWrap">
<div class="box em">
<p>Using 'rem' for all units</p>
</div>
<div class="width">Current width: </div>
<code class="flex_width">160px</code>
</div>
</div>
<!-- base code: https://codepen.io/tutsplus/pen/bdxWbB -->
body {
font-family: 'roboto', sans-serif;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}
.slider_wrap {
margin: 1rem;
}
.currentSize {
margin: 1rem;
}
.boxWrap {
float: left;
margin: 1rem;
text-align: center;
}
.box {
color: white;
}
.box p {
display: inline-block;
margin: 10%;
}
.px {
font-size: 16px;
width: 160px;
height: 160px;
background: #D1CCFF;
}
.rem {
font-size: 1rem;
width: 160px;
height: 160px;
background: #7566FF;
}
.em {
font-size: 1rem;
width: 10em;
height: 10em;
background: #1900FF;
}
.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');
});
});
