V PRAVEEN KUMAR V PRAVEEN KUMAR - 7 months ago 11
HTML Question

How do I add two range sliders and print the value in a text box using Javascript?

I have written the code for displaying the range slider values. Now I want to add both the range sliders values and display it in the text box. How do I do it?



<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.h
{
position:absolute;
left:50px;
top:100px;
}
.P
{
position:absolute;
left:50px;
top:140px;
}
.i1
{
position:absolute;
left:150px;
width:100px;
height:40px;
top:250px;

}
.i2
{
position:absolute;
left:600px;
width:100px;
height:40px;
top:250px;

}
.i3
{
position:absolute;
right:300px;
width:100px;
height:40px;
top:250px;

}
.P1
{
position:absolute;
left:150px;
top:210px;
font-size:15px;
}
.P2
{
position:absolute;
left:600px;
top:210px;
font-size:15px;
}
.img1
{
position:absolute;
left:380px;
width:90px;
height:60px;
top:245px;
}
.img2
{
position:absolute;
right:480px;
width:90px;
height:60px;
top:240px;
}
.r1
{
position:absolute;
bottom:150px;
left:150px;
width:180px;
height:10px;
-webkit-appearance:none;
border-radius:5px;
background:#d7dcdf;
outline:blue;
padding:0;
margin:0;
cursor:pointer;
}
.r1::-webkit-slider-thumb
{
-webkit-appearance:none;
width:20px;
height:20px;
border:0;
border-radius:50%;
background:lightblue;
cursor:pointer;
}
.r1:hover
{
background:lightblue;
}

.spa
{
position:absolute;
bottom:150px;
left:340px;
display:inline-block;
background:lightblue;
border-radius:3px;
line-height:20px;
text-align:center;
padding: 5px 10px;
margin-left: 8px;
}
.P3
{
position:absolute;
left:90px;
bottom:135px;
}
.P4
{
position:absolute;
left:77px;
bottom:95px;
}
.r2
{
position:absolute;
bottom:110px;
left:150px;
width:180px;
height:10px;
-webkit-appearance:none;
border-radius:5px;
background:#d7dcdf;
outline:blue;
padding:0;
margin:0;
cursor:pointer;
}
.r2::-webkit-slider-thumb
{
-webkit-appearance:none;
width:20px;
height:20px;
border:0;
border-radius:50%;
background:lightblue;
cursor:pointer;
}
.r2:hover
{
background:lightblue;
}

.spa1{
position:absolute;
bottom:110px;
left:340px;
display:inline-block;
background:lightblue;
border-radius:3px;
line-height:20px;
text-align:center;
padding: 5px 10px;
margin-left: 8px;
}
</style>
</head>
<body>
<h4 class="h">Score recommendation </h4>
<p class="P">Based on the inputs given by you, we recommend the following score splits that you should aim for to achieve the desired target score </p>

<p class="P1">Quant Score</p>
<input type="text" id="Q1" class="i1" onclick="ret(this.value);" value="">
<img src="plus.png" alt="plus" class="img1">
<p class="P2"> Verbal Score</p>
<input type="text" id="s2" class="i2">
<img src="equal.jpg" alt="equal" class="img2">
<input type="text" id="s3" class="i3">
<p class="P3">Algebra</p><input type="range" min="20" max="180" value="20" step="1" class="r1" onchange="showValue(this.value);" >
<span id="range" class="spa">20</span>
<p class="P4">Arithmetic</p><input type="range" min="20" max="180" value="20" step="1" class="r2" onchange="showValue1(this.value);" >
<span id="range1" class="spa1">20</span>
<script>
function showValue(newValue){
document.getElementById("range").innerHTML=newValue;
}
function showValue1(newValue1){
document.getElementById("range1").innerHTML=newValue1;
}
function ret(q){
var q1,q2;
q1=document.getElementById("range").value;
q2=document.getElementById("range1").value;
q=q1+q2;
document.getElementById("Q1").innerHTML=q;
}

</script>
</body>
</html>




Answer

Try something like this:

Edit: Make sure to accept the answer if it works for you.

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            .h 
            {
                position:absolute;
                left:50px;
                top:100px;
            }
            .P
            {
              position:absolute;
              left:50px;
              top:140px;
            }
            .i1 
            {
                position:absolute;
                left:150px;
                width:100px;
                height:40px;
                top:250px;
                
            }
            .i2
            {
                position:absolute;
                left:600px;
                width:100px;
                height:40px;
                top:250px;
                
            }
            .i3 
            {
                position:absolute;
                right:300px;
                width:100px;
                height:40px;
                top:250px;
                
            }
            .P1
            {
                position:absolute;
                left:150px;
                top:210px;
                font-size:15px;
            }
            .P2
            {
                position:absolute;
                left:600px;
                top:210px;
                font-size:15px;
            }
            .img1
            {
                position:absolute;
                left:380px;
                width:90px;
                height:60px;
                top:245px;
            }
            .img2
            {
               position:absolute;
                right:480px;
                width:90px;
                height:60px;
                top:240px; 
            }
            .r1
            {
                position:absolute;
                bottom:150px;
                left:150px;
                width:180px;
                height:10px;
                -webkit-appearance:none;
                border-radius:5px;
                background:#d7dcdf;
                outline:blue;
                padding:0;
                margin:0;
                cursor:pointer;
            }
            .r1::-webkit-slider-thumb
            {
                -webkit-appearance:none;
                width:20px;
                height:20px;
                border:0;
                border-radius:50%;
                background:lightblue;
                cursor:pointer;
            } 
            .r1:hover
                    {
                        background:lightblue;
                }
            
            .spa
            {
              position:absolute;
              bottom:150px;
              left:340px;
              display:inline-block;
              background:lightblue;
              border-radius:3px;
              line-height:20px;
              text-align:center;
              padding: 5px 10px;
              margin-left: 8px;
            }
            .P3
            {
                position:absolute;
                left:90px;
                bottom:135px;
            }
            .P4
            {
                position:absolute;
                left:77px;
                bottom:95px;
            }
            .r2
            {
                position:absolute;
                bottom:110px;
                left:150px;
                width:180px;
                height:10px;
                -webkit-appearance:none;
                border-radius:5px;
                background:#d7dcdf;
                outline:blue;
                padding:0;
                margin:0;
                cursor:pointer;
            }
            .r2::-webkit-slider-thumb
            {
                -webkit-appearance:none;
                width:20px;
                height:20px;
                border:0;
                border-radius:50%;
                background:lightblue;
                cursor:pointer;
            } 
            .r2:hover
                    {
                        background:lightblue;
                }
            
            .spa1{
                position:absolute;
              bottom:110px;
              left:340px;
              display:inline-block;
              background:lightblue;
              border-radius:3px;
              line-height:20px;
              text-align:center;
              padding: 5px 10px;
              margin-left: 8px; 
            }
        </style>
    </head>
    <body>
        <h4 class="h">Score recommendation </h4>
        <p class="P">Based on the inputs given by you, we recommend the following score splits that you should aim for to achieve the desired target score </p>
      
        <p class="P1">Quant Score</p>
          <input type="text" id="Q1"  class="i1" onclick="ret();" value="">
          <img src="plus.png" alt="plus" class="img1">
          <p class="P2">  Verbal Score</p>
          <input type="text" id="s2"  class="i2">
          <img src="equal.jpg" alt="equal" class="img2">
          <input type="text" id="s3"  class="i3">
          <p class="P3">Algebra</p><input type="range" min="20" max="180" value="20" step="1" class="r1" onchange="showValue(this.value);" >
          <span id="range" class="spa">20</span>
          <p class="P4">Arithmetic</p><input type="range" min="20" max="180" value="20" step="1" class="r2" onchange="showValue1(this.value);" >
          <span id="range1" class="spa1">20</span>
          <script>
              function showValue(newValue){
               document.getElementById("range").textContent=newValue;  
              }
               function showValue1(newValue1){
               document.getElementById("range1").textContent=newValue1;  
              }
              function ret(){
                  var q1,q2;
                  q1=+document.getElementById("range").textContent;
                  q2=+document.getElementById("range1").textContent;
                
              q=q1+q2;
              document.getElementById("Q1").value=q;
              return q;
          }
                       
          </script>
    </body>
</html>