JSFiddle - React, Tailwind, and code Playground

by Vladimir

HTML

<input type="range" id="range" min="0" max="100" value="0">
<div class="block" id="block" style="width: var(--width)">

</div>

CSS

.block {
  width: var(--width);
  background: green;
  height: 50px;
  display: inline-block;
}

JavaScript

let range = document.getElementById('range');
let block = document.getElementById('block');

range.addEventListener('input', function() {
	block.style.setProperty('--width', this.value + 'px');
});