How to show slider value in HTML5 range input using JavaScript?

We can either use JavaScript or jQuery. I have JavaScript example here below.

HTML

<label for="pwd_length">
    <input type="range" name="pwd_length" id="pwd_length" min="8" max="64"
        onchange="updatePwdLength(this.value);">
    Password Length
    <span id="pwd_length_div"></span>
</label>

JavaScript

var pwd_lengthElement = document.getElementById("pwd_length_div");

function updatePwdLength(ln) {
  pwd_lengthElement.innerHTML = " (" + ln + ")";
}

See it in action:

Share this post