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 How to add Read More Read Less Button using JavaScript? #3 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #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

#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 #Jan 14 How to display a student’s individual transcript in Colleague? #Jan 11 How to install PuTTY on a MacOS? #Jan 8 How to Install Xcode Command Line Tools on MacOS?
You might also like these
How to use [] (square brackets) function in Envision Basic?Envision BasicJavaScript Input Validation Theme Park Example using throw StatementJavaScriptHow to compile and watch Sass using Gulp in WordPress?SCSSCreate a responsive pricing table using simple HTML and CSSCSSHow to create a Progress Bar using JavaScript?JavaScriptQuick Introduction to 11 Array Iteration Methods in JavaScriptJavaScriptALTER DATABASE in PostgreSQLPostgresHow to add Lifecycle Methods to a Class in React?ReactFile System Integrity: How to Keep an Eye on Your Files and Folder Change?MiscellaneousKilling A Project Part 1: What criteria should be used to cancel/kill a project?MiscellaneousArguments in @mixin rules in SCSS (Sass)SCSSDebugging in WordPress Part 3: SCRIPT_DEBUG and SAVEQUERIESWordPress