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

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
How services and dependency injection work in Angular?AngularLEFT JOIN in PostgresPostgresSocial Media Colors: Sass VariablesMiscellaneousHow JavaScript classes allows us to do less typing (syntactic sugar)?JavaScriptaddcslashes() and addslashes() String Functions in PHPPHPSpecificity of attribute selectorsCSSHow to float an image around texts?CSSAngular 9 time clock update every minute, second, hourAngularWhere is the PHP log file located on Mac OS?PHPThe Types of DatabasesMiscellaneousWhat is Host Hardening and What are some Important Hardening Steps?MiscellaneousIntroduction to components and templates Part 4: Pipes and DirectivesAngular