JSFiddle - React, Tailwind, and code Playground

by Darby Rathbone

HTML

<input type="range" id='slide1' min=0 max=100 step=1></input>
    <input type="range" id='slide2' min=0 max=100 step=1></input>

JavaScript

var timer=0;
addlistener(document.getElementById('slide1'),"test.sh?button=0&dimm=");
addlistener(document.getElementById('slide2'),"test.sh?button=1&dimm=");
function addlistener(element,seturl){
var move =function move() {
    clearTimeout(timer);
    timer = setTimeout(function () {
        request( seturl+ element.value);
    }, 1000);
};

element.addEventListener('mousedown', function () {
    window.addEventListener('mouseup', function up() {
        move();
        window.removeEventListener('mousemove', move);
        window.removeEventListener('mouseup', up);
    });
    window.addEventListener('mousemove', move);
});
}
function getXMLHttpRequest() 
{
    if (window.XMLHttpRequest) {
        return new window.XMLHttpRequest;
    }
    else {
        try {
            return new ActiveXObject("MSXML2.XMLHTTP.3.0");
        }
        catch(ex) {
            return null;
        }
    }
}
function request(url){
function handler()
{
    if (oReq.readyState == 4 /* complete */) {
        if (oReq.status == 200) {
            console.log(oReq.responseText);
        }
    }
}
var oReq = getXMLHttpRequest();
if (oReq != null) {
    oReq.open("GET", url, true);
    oReq.onreadystatechange = handler;
    oReq.send();
}
else {
    window.console.log("AJAX (XMLHTTP) not supported.");
}
}