Live Code::DevDic

TAG
CSS
JavaScript
Result
Run
License

document.addEventListener("DOMContentLoaded", () => {
    const $elInputRange = document.getElementById("range");
    const $aElInputNum = document.querySelectorAll("input[type='number']");
    $aElInputNum.forEach(elInput => elInput.addEventListener("input", setRange));

function setRange(e) {
        let val = Number(e.currentTarget.value);
        let curMin = Number($elInputRange.min);
        let curMax = Number($elInputRange.max);
        switch(e.currentTarget.id) {
            case "min":
                if(curMax > val) {
                    $elInputRange.min = val;
                    $elInputRange.value = val;
                    $elInputRange.parentElement.nextElementSibling.textContent = val;
                    $elInputRange.parentElement.dataset.min = val;
                    $aElInputNum[1].min = val + 1;
                }
                
                $aElInputNum[2].min = 1;
                $aElInputNum[2].max = Number($elInputRange.max) - Number($elInputRange.min);
                break;
            case "max":
                if(curMin < val) {
                    $elInputRange.max = val;
                    $elInputRange.parentElement.dataset.max = val;
                    $aElInputNum[0].max = val - 1;
                }
                $aElInputNum[2].min = 1;
                $aElInputNum[2].max = Number($elInputRange.max) - Number($elInputRange.min);
                break;
                
            case "step":
                $elInputRange.step = val;
        }
    }
    
    $elInputRange.addEventListener("input", e => {
        let val = e.currentTarget.value;
        e.currentTarget.parentElement.nextElementSibling.textContent = val;
    });
});

Console