Yogesh Chauhan's Blog

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

in HTML & JavaScript on 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:


Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to add Read More Read Less Button using JavaScript? #4 How to uninstall Cocoapods from the Mac OS? #5 PHP Login System using PDO Part 1: Create User Registration Page #6 How to Use SQL MAX() Function with Dates?

Recently Posted

#Aug 15 Is PHP still good for back-end programming? #Aug 10 How to create a multisite network in WordPress? #Aug 3 How to create a circle that follows a cursor using JavaScript and CSS? #Aug 3 How to make a curtain slider using jQuery and CSS? #Aug 2 How to progressively load images and add a blurry placeholder? #Aug 1 How to create a placeholder loader (throbber) using CSS?
You might also like these
How to remove WordPress TinyMCE Editor buttons?WordPressDoes :is() pseudo selector hint at CSS preprocessing in the future?CSSDROP DATABASE (remove a database) from PostgresPostgresWhat is the difference between let and var in Swift?SwiftLearn to make a responsive gallery using CSS Grid and without media queriesCSSAdvanced nesting in Sass (SCSS) using at-rootSCSSWhat happened to your Google Analytics Tracking ID, can’t find it?MiscellaneousThe :last-of-type selectorCSSWhat is the correct way to enqueue multiple CSS files in WordPress?WordPressCONCAT and CONCAT_WS Functions in PostgresPostgresaddcslashes() and addslashes() String Functions in PHPPHPbin2hex() and chr() String Functions in PHPPHP