0

Tenho 5 range, e gostaria de saber como eu faço para quando um range tiver em 100% os outros 4 ficam 0% e conforme eu vá controlando 1 os outros vão alterando e vice e versa, isso é possível?

https://codepen.io/thcbeats/pen/xeyxwa

$(".ppcscale").each(function() {
  var that = $(this);
  that.ionRangeSlider({
    skin: "big",
    grid: true
  });
});

$(".ppcscale").on("change", function() {
  var $inp = $(this),
    from = $inp.data("from");
  
  var budget = 0;

   $(".ppcscale").each(function() {
       budget += parseInt($(this).data("from"));
     
      $(".ppcbudget").html(Math.floor(budget));
    });
  return budget;
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.0/css/ion.rangeSlider.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.0/js/ion.rangeSlider.min.js"></script>

<input class="ppcscale" data-min="0" data-max="100" data-from="0">
<input class="ppcscale" data-min="0" data-max="100" data-from="0">
<input class="ppcscale" data-min="0" data-max="100" data-from="0">
<input class="ppcscale" data-min="0" data-max="100" data-from="0">
<input class="ppcscale" data-min="0" data-max="100" data-from="0">
<input class="ppcscale" data-min="0" data-max="100" data-from="0">

Exemplo:

inserir a descrição da imagem aqui

4
  • e conforme eu vá controlando 1 os outros vão alterando e vice e versa, não entendi o que você quer que o sistema faça quando os demais forem alterados Commented 24/04/2019 às 18:25
  • Imagina que tenho 5 campos e todos podem ir de 0%-100%, se no primeiro campo eu ir 80%, automaticamente nos outros eu só poderei ir até o 20% , e assim segue com todos, isso é muita viagem minha? Commented 25/04/2019 às 1:18
  • se o 1º for à 80% e o 2º à 15%, os demais só poderiam ir à 5(o 3º, 4º, 5º ou 6º) ? Commented 25/04/2019 às 13:21
  • Sim, gostaria de fazer tipo um equalizador... Eu achei esse aqui, estou tentando entender como ele funciona.. github.com/jhovgaard/jquery.rangegroup Commented 25/04/2019 às 15:24

0

Você deve fazer log-in para responder a esta pergunta.

Pesquise outras perguntas com a tag .