Schiebereglerwert dynamisch ändern

Question

Ich benutze Bootstrap-Schieberegler und erstellen Schieberegler dynamisch in einer Gruppe von drei (leicht, mittel, schwer). Ich möchte den Maximalwert der verbleibenden zwei Schieberegler dynamisch ändern. Die Gesamtwerte aller drei Schieberegler in einer Gruppe sollten nicht größer als 100 sein. Ich kann mir nichts vorstellen, da alle Schieberegler dieselbe Klasse haben. Irgendeine Idee, wie man das erreicht.?

Hier ist ein Link jsfiddle: https://jsfiddle.net/sqj1djyv/1/

HTML:

<div class="container"> 
Container 1 
<div class="container" style="padding:20px"> 
Easy: 
<input class="slider" name="easy[]"data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="100" data-slider-step="10" data-slider-value="1"/> 
</div> 
<div class="container" style="padding:20px"> 
Medium: 
<input class="slider" name="medium[]"data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="100" data-slider-step="10" data-slider-value="1"/> 
</div> 
<div class="container" style="padding:20px"> 
Hard: 
<input class="slider" name="hard[]"data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="100" data-slider-step="10" data-slider-value="1"/> 
</div> 
</div> 

<div class="container"> 
Container 2 
<div class="container" style="padding:20px"> 
Easy: 
<input class="slider" name="easy[]"data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="100" data-slider-step="10" data-slider-value="1"/> 
</div> 
<div class="container" style="padding:20px"> 
Medium: 
<input class="slider" name="medium[]"data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="100" data-slider-step="10" data-slider-value="1"/> 
</div> 
<div class="container" style="padding:20px"> 
Hard: 
<input class="slider" name="hard[]"data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="100" data-slider-step="10" data-slider-value="1"/> 
</div> 
</div> 

JQuery:

$("input.slider").slider({ 
    tooltip:'always' 
}); 

Answer 1

Sie :nth-child() verwenden könnte den richtigen Schieber zum Ziel. So etwas wie

Sie möchten wahrscheinlich eine zusätzliche Klasse zu den Container-Werten hinzufügen, obwohl Sie jeden Schieberegler einzeln anvisieren können. containerTop so etwas.