Problm z range Opcje

[koniol2]

Mam taki kod

Kod

                  <ul id="suw">
                                    <li class="bold">2. CZY PRZESZKODY NA TRASIE MAJĄ BYĆ (zaznacz  procentowo np. błoto 30% woda 30% podbiegi 20% bieg rzekami 20%)</li>
                                    <li class="suwak">PRZESZKODY BŁOTNE<input type="range" class="one" min="0" max="100" value="0" name="przeszkody"><span class="due"></span> &#37</li>
                                    <li class="suwak">PRZESZKODY WODNE<input type="range" class="one" min="0" max="100" value="0" name="przeszkody"><span class="due"></span> &#37</li>
                                    <li class="suwak">PODBIEGI POD GÓRE <input type="range" class="one" min="0" max="100" value="0" name="przeszkody"><span class="due"></span> &#37</li>
                                    <li class="suwak">TEREN PISZCZYSTY<input type="range" class="one" min="0" max="100" value="0" name="przeszkody"><span class="due"></span> &#37</li>
                                    <li class="suwak">TEREN SUCHY<input type="range" class="one" min="0" max="100" value="0" name="przeszkody"><span class="due"></span> &#37</li>
                                    <li class="suwak">DUKTY LESNE<input type="range" min="0" max="100" value="0" name="przeszkody"><span class="due"></span> &#37</li></ul>

proszę o pomoc w przerobienu z js chce żeby po przesunięciu któregoś suwaka np na 20% to nie będzie możliwe przestawienie następnego na 90 % tylko na 80%
mam taki kod js

Kod

onload = function() {
var $ = function(cl) {
return document.querySelectorAll(cl);
};
        $('.one').oninput = function() {
var total = 100;
        $('.due').innerHTML = this.value;
};
        $('.one').oninput();

};