Font-size slider

Changes the CodeMirror default font-size.

by junkfood66

HTML

<input id="font-slider" type = "range" min="75" max= "140" value='92' step="1"> &nbsp; 
<span class="scale"> Font-size: <text id="scale" class="field">0.92</text> rem</span>
<br /><br />
<div class="CodeMirror">
This text is to show the changes in font-size and line-height. You can use the slider, or you can click the indicator number ('0.92') and input a new number. If you leave the field blank it will reset to 0.92rem. If you want to use this in a page with a CodeMirror widget, you need to add an apostrophe to " .CodeMirror ", like so:  " .CodeMirror <span style="color:red">*</span> ". The apostrophe makes it work.
</div>

CSS

body {
  margin: 20px;
  font: 400 0.92rem/1.1rem "Montserrat", Sans-serif;
}
.scale {
  vertical-align: super;
  color: #03115e;
  margin-left: 4px;
  font: 400 0.92rem/1.1rem "Helvetica", Sans-serif;
}
.field {
  color: #00F;
  font-weight: 500;
}
.field input {
    max-width: 30px;
}
.CodeMirror {
  font-size: 0.92rem;
  line-height: 1.2rem;
}

JavaScript

$(document).ready(function() {
      $('#font-slider').prop('value', '92');
    });
    $('#font-slider').on('input', function(){
      document.getElementById("scale").innerHTML = Number(this.value/100).toFixed(2) ;
      var v = $(this).val() / 100;
      var v2 = v * 1.25;
      $('.CodeMirror').css({'font-size': v + 'rem', 'line-height': v2 + 'rem'});    
    });
    $('.field').on('click', function() {
      var t = $(this).text();
      $(this).text('').append($('<input id="F">',{'value' : t}));
      $('#F').focus();
    });
    $('.field').on('blur keyup','input',function(e) {
      if (e.type !== 'keyup' || (e.type === 'keyup' && e.keyCode === 13)) {
        $(this).parent().text($(this).val());  
        if($(this).val()===''){ $(this).val('0.92')}
        document.getElementById("scale").innerHTML = Number(this.value);
        $('#font-slider').prop('value', $(this).val() * 100);
        var v = $(this).val() ;
        var v2 = v * 1.25;
        $('.CodeMirror').css({'font-size': v + 'rem', 'line-height': v2 + 'rem'});     
        $(this).text('').blur();
      }
 		});