In this example, we used a variable named score to calculate the strength of password. If password contain 6 chars the score increases with 10 points, if it has at least one digit 10 points, has at least one ASCII symbol (!@#$%^&*) 10, mixed upper and lower case 10, perfect score = 40.The passwordStrength(pass) function calculates the score according to the value provided in the password field and makes the slider moveable by passing the value of score to the slider.

Example:

index.html

<input type="text" name="password" placeholder=" enter password" id="pass"/>
<div id="indicator">
   <input type="range" id="slider" min="0" max="40" value="0" />
   <p class="note">Current value: <span id="currentValue">0</span></p>
</div>

abc.js

 $(document).ready(function(){
      $('#pass').keyup(function(){
          passwordStrength($('#pass').val());
      });
 });

function passwordStrength(pass)
 {
        var score=0;
        if(pass.length > 6)
            {score+=10;}
        if(pass.match(/(.*[0-9])/))
            {score+=10;}
        if(pass.match(/(.*[!,@,#,$,%,^,&,*,?,_,~])/))
            score+=10;
        if (pass.match(/([a-z].*[A-Z])|([A-Z].*[a-z])/))  
            score += 10;
        $('#slider').val(score);
        var currentValue = score;
        $('#currentValue').html(currentValue);
  }