Как я могу синхронизировать элементы ввода html 5 = «диапазон» (ползунок)?

Question

У меня есть следующий html, содержащий 3 элемента html5 input = "range", которые я назову ползунками. В html также есть тег span для отображения значения для каждого слайдера. Каждый тег span отображает процентную сумму, все 3 из которых составляют до 100%.

HTML:

<div class="container"> 
    <input type="range" class="slider" id="r1" value="70" /><span id="s1"></span><br /> 
    <input type="range" class="slider" id="r2" value="20" /><span id="s2"></span><br /> 
    <input type="range" class="slider" id="r3" value="10" /><span id="s3"></span><br /> 
    <input type="hidden" class="placeholder" /> 
</div> 

Я написал следующий код JQuery, который я использую для обновления 2 ползунков, которые не изменились, как и любой один ползунок изменяется. Код сохраняет все значения пролетных тегов в синхронизации, регулируя два которого ползунки не меняется, так что сумма всех трех 100.

JQuery:

<script type="text/javascript"> 
    $().ready(function() { 

     //set the initial values for the spans 
     var sliders = $('.slider'); 
     sliders.each(function (index, element) { 
      var slider = $(this); 
      slider.next('span').text(element.value); 
     }) 

     $('.container').on('change', '.slider', function() { 
      var slider = $(this); 
      var sliderId = this.id; 
      var amount = this.value; 
      slider.next('span').text(amount); 

      //Iterate over the sliders that are not being changed, and update them 
      var sliders = $('.slider'); 
      var sliderCount = sliders.length; 
      var otherSlidersCount = sliderCount - 1; 
      sliders.each(function (index, element) { 
       var x_id = this.id; 

       if (x_id != sliderId) { 
        var totalChangeAmount = 100 - amount; 
        var sliderChangeAmount = totalChangeAmount/otherSlidersCount; 
        this.value = sliderChangeAmount; 
        $(this).next('span').text(sliderChangeAmount); 
       } 

      }) 

     }); 
    }); 
</script> 

Вот jsfiddle с рабочий код:

jsfiddle

у меня есть проблема, что я просто разделив измененный процент от изменяющегося ползунка на числе других ползунков (2), а затем выделить эту сумму в равной степени каждый из er 2.

Мне нужно изменить его так, чтобы значение диапазона для каждого из не изменяющихся ползунков изменилось относительно его существующего значения. Например, если я увеличиваю ползунок 1 от 70 до 80, тогда слайдер 2 должен уменьшаться на 5-15, а слайдер 3 также должен уменьшаться на 5-5 (всего 100 процентов).

Может ли кто-нибудь помочь с предложениями о том, как это сделать?

Answer 1

Лучше всего отслеживать наименее недавно используемый слайдер и обновлять его значение. Это довольно немного кодирования, особенно если у вас всего 3 слайдера, но это позволит вам делать что угодно.