如何通过单击单选按钮更改范围滑块添加？

Question

我有两个单选按钮和多个范围滑块。两个单选按钮具有不同的值。
我想要的是当我单击其中一个单选按钮时，最大值应该更改（12 更改为 24，24 更改为 12）。添加这些范围滑块会向上移动到单选按钮的值。

<input type="radio" id="starter" name="plan" value="starter">
<label for="starter">Up to 12</label><br>
<input type="radio" id="plus" name="plan" value="plus">
<label for="plus">Up to 24</label><br>

 <input type="range" id="range-1" name="slider-1" min="0" max="12" value="0" step="1" class="slider range-slider"><br>
 <input type="range" id="range-1" name="slider-1" min="0" max="12" value="0" step="1" class="slider range-slider"><br>
 <input type="range" id="range-1" name="slider-1" min="0" max="12" value="0" step="1" class="slider range-slider"><br>
 <input type="range" id="range-1" name="slider-1" min="0" max="12" value="0" step="1" class="slider range-slider"><br>

Answer 1

每当您的范围幻灯片发生变化时，您可以使用 .each 循环计算所有滑块的总数并检查总数是否大于最大值，如果是，您可以设置最后一个滑块值更改为 0

演示代码 :

$(".slider").on("change", function() {
console.clear()
  var max = $("[name=plan]:checked").data('max')
  var total = 0
  //get total
  $(".slider").each(function() {
    total += parseInt($(this).val()) //calculate total
  })
  console.log("Total --" + total + " Max --" + max)
  if (total > max) {
    $(this).val(0) //set value to 0 again..
    console.log("can't move..")
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!--added max-->
<input type="radio" id="starter" name="plan" data-max="12" value="starter" checked>
<label for="starter">Up to 12</label><br>
<input type="radio" id="plus" name="plan" data-max="24" value="plus">
<label for="plus">Up to 24</label><br>

<input type="range" name="slider-1" min="0" max="12" value="0" step="1" class="slider range-slider"><br>
<input type="range" name="slider-1" min="0" max="12" value="0" step="1" class="slider range-slider"><br>
<input type="range" name="slider-1" min="0" max="12" value="0" step="1" class="slider range-slider"><br>
<input type="range" name="slider-1" min="0" max="12" value="0" step="1" class="slider range-slider"><br>

如何通过单击单选按钮更改范围滑块添加？

How to change the range slider addition by click on radio button?

html

javascript

jquery

radio-button