JSFiddle - React, Tailwind, and code Playground

HTML

<body> 
	<div class = "box">
	<div class = "wrapper">
		<div class = "wrapperOfColour">
		<label>
		Баланс красного<input type="range" min="0" max="255" step="1" value="50" name="red" id="red">
		</label>
	    </div>
		<div class = "wrapperOfColour">
		<label>
		Баланс зеленого <input type="range" min="0" max="255" step="1" value="50" name="green" id="green">
		</label>
	    </div>
		<div class = "wrapperOfColour">
		<label>
		Баланс синего <input type="range" min="0" max="255" step="1" value="50"name="blue" id="blue">
		</label>
		</div>
	</div>
	<div class="square">
		
	</div>
    </div>
</body>

CSS

.wrapper,
.square {
	border: 1px solid black;
	height: auto;
	border-radius: 5px;
}

.box {
	display: inline-block;
	border: 1px solid black;
	padding: 5px;
	margin-right: 15px;
}

label {
	margin: 3%;
    display: inline-block;
    width: 100%;
}

p {
	text-align: center;
}

.wrapper {
	float: left;
	width: 400px;
	height: 160px;
}

.wrapperOfColour {
    display: float;
    width: 100%;
	  }

.square {
	float: right;
	width: 160px;
	height: 160px;
}

.square:after {
	clear: both;
}

JavaScript

let inputs = document.querySelectorAll("input");
    	console.log(inputs);

        function handleUpdate() {
        	const suffix = '0';
        	console.log(this.value);
        	document.documentElement.style.setProperty('')
        }
    	
    	inputs.forEach(input => input.addEventListener('change', handleUpdate));
    	inputs.forEach(input => input.addEventListener('mousemove', handleUpdate));