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 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 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
All different methods for accessing elements in the DOM using JavaScriptJavaScriptSelf-Driving and Intelligent NetworksMiscellaneousHow to create a simple digital clock using JavaScript?JavaScriptSolution to “TypeError: ‘x’ is not iterable” in Angular 9AngularHow to avoid element shift on border change while hovering in CSS?CSSHow to float an image around texts?CSSClearwater Seafoods – B2C in ChinaMiscellaneous3 JavaScript methods to use when you want to go back and forth in historyJavaScriptABS and NEG functions in Envision BasicEnvision BasicSolution for the error Commit failed – exit code 1 received in Desktop GithubMiscellaneousHow services and dependency injection work in Angular?AngularHow to redirect or load a new document using JavaScript?JavaScript