belykia
1 year ago

2 sliders depending on each others ?

Posted 1 year ago by belykia

Hello Everybody :

I have a problem with javascript , i would like to know how to manage 2 sliders , i mean 2 input with type="range" , everyone has 100 as a max value , as in the following html code :

 <input type="range" min="0" max="100" id="one">
  <input type="range" min="0" max="100" id="two">

i m going to explain with 3 examples , so i have 2 sliders ,1 and 2 , the first one has a max value 100 , and the second one 100. each slider depends on the other ,according to the html code the value of both sliders is 200 , but the value that the 2 sliders needs to reach is 100 , they have to stop moving in that point , otherwise if i want to come back to the 0 point i can do it .for examples :if the slider one is in the middle , it means that the slider2 has not to surpass the middle.an other example if the i move all the slider1 , the second one doesn't have to move , because the slider 1 reached the 100 value . if i move the slider1 until the value 70 , the second slider , i mean the slider2 needs to move until the value 30 , it's approximately ,one third of the position.

for me i took the value of the 2 sliders , then i used the following code , but , it blocked the sliders at all , and i couldn't move them to the 0 value :

          var      co2 = slider1+slider2;

  if(co2>=100){
         document.getElementById("one").disabled = true;
         document.getElementById("two").disabled = true;

                               co2=100
         }

Please sign in or create an account to participate in this conversation.