Live Code::DevDic

TAG
CSS
JavaScript
Result
Run
License

window.addEventListener("load", () => {
    const $elContent = document.getElementById("content");
    const $elBtnTest = document.getElementById("btn-test");
    const $nlElRange = document.querySelectorAll("input[type='range']");
    
    $elBtnTest.addEventListener("click", e => {
    	e.currentTarget.form.reportValidity();
    });
    
    $nlElRange.forEach(elInput => {
        elInput.addEventListener("input", e => {
            const $elCurTarget = e.currentTarget;
            $elCurTarget.previousElementSibling.dataset.maxlength = $elCurTarget.value;
            if($elCurTarget.id == "minlength") {
                try {
                	$elContent.minLength = $elCurTarget.value;
                } catch(err) {
                    $elCurTarget.previousElementSibling.dataset.maxlength = err.message
                }
            } else {
                try {
                    $elContent.maxLength = $elCurTarget.value;
                } catch(err) {
                    $elCurTarget.previousElementSibling.dataset.maxlength = err.message
                }
                
            }            
        });    
    });

$nlElRange[0].dispatchEvent(new Event("input"));
    $nlElRange[1].dispatchEvent(new Event("input"));
});

Console