JSFiddle - React, Tailwind, and code Playground

HTML

<input type="range" id="scale_range" min="100" max="500" value="250" />
<div class="main-content_datafield">1.</div>
<div class="main-content_datafield">2.</div>
<div class="main-content_datafield">3.</div>
<div id="demo" onclick="changrange()"></div>

CSS

.main-content_datafield {
    width: 250px;
    background: red;
}

JavaScript

var scale_range = document.getElementById('scale_range');
demo = document.getElementById("demo");

scale_range.onchange = function () {
    demo.innerHTML = this.value;

    var elems = document.getElementsByClassName("main-content_datafield");
    for (var i = 0; i < elems.length; i++) {
        elems[i].style.width = this.value + "px";
    }
}