TAG
CSS
JavaScript
Result
Run
License
<div class="wrap"> <label for="content">Message</label> <textarea id="content" placeholder="Enter your message"></textarea> <label>Max Length: </label> <input type="range" id="maxlength" value="20" min="10" max="100" /> </div>
.wrap { display: flex; flex-direction: column; row-gap: 10px; justify-content: center; } .wrap > label:nth-child(3)::after { content: attr(data-maxlength); }
window.addEventListener("load", () => { const $elContent = document.getElementById("content"); const $elMaxlength = document.getElementById("maxlength"); $elMaxlength.addEventListener("input", e => { const $elCurTarget = e.currentTarget; $elCurTarget.previousElementSibling.dataset.maxlength = $elCurTarget.value; $elContent.maxLength = $elCurTarget.value; }); $elMaxlength.dispatchEvent(new Event("input")); });
Console
expand_less
License
License
by DevDic
Close