JSFiddle - React, Tailwind, and code Playground

by Jim_Toth

HTML

<input type="range" name="amountRange" min="0" max="20" value="0" oninput="this.form.amountInput.value=this.value" />
<input type="number" name="amountInput" min="0" max="20" value="0" oninput="this.form.amountRange.value=this.value" />

<select>
  <option value="per">%</option>
  <option value="em">em</option>
  <option value="px">px</option>
</select>





<div class="container">
  <div class="block"></div>
</div>

CSS

div.block {
  background: red;
  width: 100px;
  height: 100px;
  margin-top: 10px;
}

.container {
  width: 100%;
}

JavaScript

/*$("input[type='number']").change(function() {
  var ip = $(this);
  switch ($('select').val()) {
    case 'per':
      $('div.block').width(ip.val() + "%");
      break;

    case 'em':
      $('div.block').width(ip.val() + "em");
      break;

    case 'px':
      $('div.block').width(ip.val() + "px");
      break;

    default:
      return;
  }

});*/