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>
<input class="convert" maxlength="1" name="ch" id="ch" />

JavaScript

$(document).ready(function() {
    var sizes = ["0", "1", "2", "3", "4", "5", "5", "6", "7"];

$("#slider").slider({
      orientation: "vertical",
      range: "min",
      animation:false,
      min: 0,
      max: 8,
      value: 0,
  slide: function(event, ui) {
      $('.convert').val(sizes[ui.value]);      
  },
    change:function(){
               alert("slider changed");
    }
});

       $('.convert').change(function(e){
           alert("works?");
       });

       $('.convert').keypress(function(e){
           alert("works?");
       });

 });