How to use Range Element in a simple voting tool

Hello Everyone

In the previous post, we have discussed some elements of HTML. As we do not have a full tutorial on HTML but I try to use and explain some elements in the random tutorials.
In this tutorial, I am going to use an element of an HTML called "Range". This is very cool Element of HTML. We are going to use it for a voting tool. We will create a tool that will vote for us and we will able to change the voting weight by the range element. This will be a very basic tool that will help you understand the Hive Library and HTML as well. So let's begin.

I have a very basic HTML file open in my visual studio and a JavaScrip file which is already linked.

To cast a vote we need the following things.

User Name
Author Name
Posting Key
Permalink
Voting Weight
So to create a page we need 3 Text elements, 1 password, and 1 range element.

<!DOCTYPE html>
<html lang="en">
<head>
  
    <title>Document</title>
</head>
<body>
    <form> 
        
   User Name <input type="text" id="UserName" ><br><br>
    Posting Key<input type="password" id="pKey"><br><br>
    Author Name <input type="text" id="author"><br><br>
    Permlink <input type="text" id="link"><br><br>
    Voting Weight<input type="range" max="100" min="1" onclick="update()"><br>
    <br> <input type="button" value="Click to vote" onclick="vote()">
</form>
</body>
<script src="index.js"></script>
</html>

Now le's include the hive Library by Hivejs CDN.

First of all, let's get the values of each element and assign it to a variable.

Now we have all the values assigned to variables. Whenever someone clicks on the "click to vote" button a function will be called which is "vote()".

Now we need to put all the value into the api of Hive library.
But let me use the "update()" function which I declared in the HTML page. This function will be called whenever someone clicks on scroll or the range. This will show the value of the range on HTML inside a "div".