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.


<label for="pwd_length">
    <input type="range" name="pwd_length" id="pwd_length" min="8" max="64"
    Password Length
    <span id="pwd_length_div"></span>


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

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

See it in action:

Most Read

#1 How to add Read More Read Less Button using JavaScript? #2 How to check if radio button is checked or not using JavaScript? #3 Solution to the error “Visual Studio Code can’t be opened because Apple cannot check it for malicious software” #4 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #5 How to uninstall Cocoapods from the Mac OS? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

#Apr 8 JSON.stringify() in JavaScript #Apr 7 Middleware in NextJS #Jan 17 4 advanced ways to search Colleague #Jan 16 Colleague UI Basics: The Search Area #Jan 16 Colleague UI Basics: The Context Area #Jan 16 Colleague UI Basics: Accessing the user interface
You might also like these
Check whether a variable exists and not empty in PHPPHPHow to read Standard Input in Swift?SwiftDoes :is() pseudo selector hint at CSS preprocessing in the future?CSSHow to define constants in PHP?PHPHow to Skip or Exclude a Specific URL or File From .htaccess Rewrite Rule?PHPIN Operator in PostgreSQLPostgresCheck if any column has NULL values in PostgresPostgresThe SQL UNION OperatorSQL/MySQLAll possible ways you can Insert Data in PostgresPostgresHow to use Context in React?ReactHow to display modal from bottom to top using CSS and JavaScript?CSSWhat is Prototypal Inheritance in JavaScript?JavaScript