YogeshChauhan . com

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:

amazon

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 How to Use SQL MAX() Function with Dates? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

Jun 16 What are Stored Procedures for SQL Server? Jun 16 What are Class Constants in PHP? Jun 15 A short basic guide on states in React Jun 15 How to define constants in PHP? Jun 15 How to define visibility for a property in PHP? Jun 15 How to use @if and @else in SCSS?

You might also like these

How to change the style for checked radio button or checkboxes using CSS?CSSHere’s what we can do with PHP date() functionPHPNew to  Drupal? Here’s What You Need to KnowDrupalHow to pass arguments in SCSS function?SCSSWhat is the difference between let and var in Swift?SwiftThe 7 Security Objectives of Any Organization for IT and Network SecurityMiscDebugging in WordPress Part 2: WP_DEBUG_LOG and WP_DEBUG_DISPLAYWordPressAmpersand (Parent Selector) in SCSS (Sass)SCSSCreate dynamic selectors using SCSS (Sass)SCSSWhat is the difference between float and double?MiscHow to create a CSS full page background image?CSSWhat are Modules and Components in Angular?Angular