JSFiddle - React, Tailwind, and code Playground

HTML

<h3>A slider control</h3>

<input type="range" id="myRange" value="50" min="0"  max="1000" ><br>
<input type="range" id="myRange2" value="25" min="0" max="1000" ><br>
<input type="range" id="myRange3" value="25" min="0" max="1000" ><br>

<p>But it does not "feel" right.</p>



<p id="demo"></p><p id="demo2"></p><p id="demo3"></p>

JavaScript

var mouseDown  = false;
var mouseDown2  = false;
var mouseDown3  = false;
document.getElementById('myRange').onmousedown = function () {
mouseDown    = true;
}
document.getElementById('myRange2').onmousedown = function () {
mouseDown2    = true;
}
document.getElementById('myRange3').onmousedown = function () {
mouseDown3    = true;
}
document.onmousemove = function myFunction() {
if (mouseDown === true) {
    var x = document.getElementById("myRange").value;
    document.getElementById("demo").innerHTML = x;
    
    
    var y = document.getElementById("myRange2").value;
    var ymax = document.getElementById("myRange2").max;
    	y = (ymax/2)-(x/2);
    	document.getElementById("myRange2").value = y;
    	document.getElementById("demo2").innerHTML = y;
    
    var z = document.getElementById("myRange3").value;
    z = (ymax/2)-(x/2);
    document.getElementById("myRange3").value = z;
    document.getElementById("demo3").innerHTML = z;
}

if (mouseDown2 === true) {
    var x = document.getElementById("myRange2").value;
    document.getElementById("demo2").innerHTML = x;
    
    
    var y = document.getElementById("myRange").value;
    var ymax = document.getElementById("myRange").max;
    	y = (ymax/2)-(x/2);
    	document.getElementById("myRange").value = y;
    	document.getElementById("demo").innerHTML = y;
    
    var z = document.getElementById("myRange3").value;
    z = (ymax/2)-(x/2);
    document.getElementById("myRange3").value = z;
    document.getElementById("demo3").innerHTML = z;
}


if (mouseDown3 === true) {
    var x = document.getElementById("myRange3").value;
    document.getElementById("demo3").innerHTML = x;
    
    
    var y = document.getElementById("myRange2").value;
    var ymax = document.getElementById("myRange2").max;
    	y = (ymax/2)-(x/2);
    	document.getElementById("myRange2").value = y;
    	document.getElementById("demo2").innerHTML = y;
    
    var z = document.getElementById("myRange").value;
    z = (ymax/2)-(x/2);
  ...