YogeshChauhan.com
How to show slider value in HTML5 range input using JavaScript?
September 25, 2020

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:

dreamhost

Leave a Reply

Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 How to set opacity or transparency using CSS? #3 Pagination in CSS with multiple examples #4 How to make HTML form interactive and using CSS? #5 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #6 How to uninstall Cocoapods from the Mac OS?

Recently Posted

Mar 3 How to embed YouTube or other video links in WordPress? Mar 3 How to change the Login Logo in WordPress? Mar 3 substring() Method in JavaScript Mar 3 Window setInterval() Method in JavaScript Mar 2 How to zoom an element on hover using CSS? Mar 2 the box-sizing property in CSS

You might also like these

How to enable GD library support for PHP on windows server?PHPForcing the domain to serve securely using HTTPSMiscCSS Overflow Property with ExamplesCSSWhat are Conditional Tags in WordPress?WordPressadd_filter function in WordPressWordPress3 Types of Arrays in PHPPHPHow to check if radio button is checked or not using JavaScript?JavaScriptWhat is Hadoop and Hadoop Ecosystem?MiscHow to Use the EXISTS and NOT EXISTS Operator with a Subquery in SQL and MySQL?SQL/MySQLHow to detect if browser supports WebP format on server side PHP script?PHPWhat are components in Angular?AngularLearn to Implement Estimated Reading Time using PHP Part 2: Final Implementation with Source CodePHP