JSFiddle - React, Tailwind, and code Playground

by ppgab

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container m-2">
  <div class="row">
    <div resizable colsize="12" class="border border-dark rounded col">
    <label for="customRange2">Tamanho:</label>
<input type="number" class="custom-range" min="1" max="12" id="customRange2">
    </div>
  </div>  
</div>

CSS

[colsize="1"]{
  -ms-flex: 0 0 8.333333%;
  flex: 0 0 8.333333%;
  max-width: 8.333333%;
}
[colsize="2"]{
  -ms-flex: 0 0 16.666667%;
  flex: 0 0 16.666667%;
  max-width: 16.666667%;
}
[colsize="3"]{
  -ms-flex: 0 0 25%;
  flex: 0 0 25%;
  max-width: 25%;
}
[colsize="4"]{
  -ms-flex: 0 0 33.333333%;
  flex: 0 0 33.333333%;
  max-width: 33.333333%;
}
[colsize="5"]{
  -ms-flex: 0 0 41.666667%;
  flex: 0 0 41.666667%;
  max-width: 41.666667%;
}
[colsize="6"]{
-ms-flex: 0 0 50%;
flex: 0 0 50%;
max-width: 50%;
}
[colsize="7"]{
-ms-flex: 0 0 58.333333%;
flex: 0 0 58.333333%;
max-width: 58.333333%;
}
[colsize="8"]{
-ms-flex: 0 0 66.666667%;
flex: 0 0 66.666667%;
max-width: 66.666667%;
}
[colsize="9"]{
-ms-flex: 0 0 75%;
flex: 0 0 75%;
max-width: 75%;
}
[colsize="10"]{
-ms-flex: 0 0 83.333333%;
flex: 0 0 83.333333%;
max-width: 83.333333%;
}
[colsize="11"]{
-ms-flex: 0 0 91.666667%;
flex: 0 0 91.666667%;
max-width: 91.666667%;
}
[colsize="12"]{
-ms-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%;
}

JavaScript

document.getElementById('customRange2').onchange = evt => {
	const col = evt.target.closest('.col');
  const nsize = evt.target.value;
  col.setAttribute('colsize',nsize);
}