JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
 <div id="slider" style="height:200px;"></div>

<div class='rsize' id='rsize'></div>

<input class="convert" maxlength="1" name="ch" id="ch" />

JavaScript

var sizes = ["0", "1", "2", "3", "4", "5", "5", "6", "7", "8", "9", "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"];

$("#slider").slider({
      orientation: "vertical",
      range: "min",
      animation:false,
      min: 0,
      max: 36,
      value: 0,
  slide: function(event, ui) {
      $(".rsize").text(sizes[ui.value]);
  }
});
var a  = document.getElementById('slider');

a.addEventListener('mouseup',changeval);
function changeval() {
var a  = document.getElementById('rsize');
var b = document.getElementById('ch');
    b.value = a.innerHTML;
}