JSFiddle - React, Tailwind, and code Playground

by Shaik Masoom

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;
        //document.getElementsByClassName("main-content_datafield").style.width= this.value;
        $('.main-content_datafield').css('width',this.value+'px');
    }