CODEWITHSUNDEEP
javascripthtmlslider
hededo
hededo

Reputation: 379

HTML Sliders issues

I am trying to print the value of a slider next to the slider. The first slider works and its value changes when the slider is moved. I do not know why, but the second slider changes the value printed next to the first slider. I want to be able to print the values of each individual slider correctly.

Here is the HTML:

 <div>
 <STRONG>Theta</STRONG>
 <input id="thetaSlider" type="range"
 min="0" max="360" step="1" value="0" onchange="displayValue(this.value)"/>
 <span id="range">0</span>
</div>

<div>
 <STRONG>Subdivide</STRONG> 
 <input id="subdivideSlider" type="range"
 min="0" max="6" step="1" value="0" onchange="displayValue(this.value)"/>
  <span id="range">0</span>
</div>

Here is the javascript function I use to print the values of the sliders:

<script type="text/javascript">
        function displayValue(value)
        {
            document.getElementById("range").innerHTML=value;
        }
    </script>

Why does the javascript function use the same variable when called by two different sliders? How can I change the javascript function to do what I want?

Upvotes: -1

Views: 64

Answers (1)

Sam1604
Sam1604

Reputation: 1489

Here you are using the id for both span is range. You may use different id's for spans.

Here is a DEMO

Upvotes: 2

Related Questions