HTML Form Slider Group

Question

Мне нужна группа слайдеров или что-то подобное (я не знаю официального названия).

По существу, есть несколько ползунков, и все они составляют до 100%. Увеличивая один, вы уменьшаете остальные.

Я знаю, что эта проблема уже решена, поскольку я видел, как она использовалась в Humble Bundle, где вы выбираете, куда идут ваши пожертвования. Есть ли там библиотека, которая делает это?

Если нет, я в порядке с созданием чего-либо с помощью jQuery-UI или какого-либо другого интерфейса пользовательского интерфейса.

Answer 1

Вы можете использовать слайдеры пользовательского интерфейса jQuery, чтобы сделать это довольно легко. Ниже приведен некоторый псевдокод javascript, который вы хотите изучить. Документация делает очень хорошую работу покрытия, как события работы:

Документация по API: http://api.jqueryui.com/slider/

JSFiddle: https://jsfiddle.net/b54dntrz/

HTML:

<div id="slider1"></div> 
    <br/> 
    <div id="slider2"></div> 

JavaScript:

$(document).ready(function() { 
    $('#slider1').slider({ 
     max: 100, 
     slide: function (event, ui) { 
      var slider2val = $('#slider2').slider('value'); 
      if (ui.value + slider2val > 100) { 
       $('#slider2').slider({ 
        value: slider2val - 1 

       }); 
      } 
     } 
    }); 
    $('#slider2').slider({ 
     max: 100, 
     slide: function (event, ui) { 
      var slider1val = $('#slider1').slider('value'); 
      if (ui.value + slider1val > 100) { 
       $('#slider1').slider({ 
        value: slider1val - 1 
       }); 
      } 
     }, 
    }); 

})