How to relate 5 Range to dividing 100% as they change?

Asked

Viewed 26 times

0

I have 5 range, and I would like to know how I do for when one range is 100% the other 4 is 0% and as I go controlling 1 the others are changing and vice versa, this is possible?

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">

Example:

inserir a descrição da imagem aqui

  • and as I go controlling 1 others will change and vice versa, I don’t understand what you want the system to do when the others are changed

  • Imagine that I have 5 fields and everyone can go from 0%-100%, if in the first field I go 80%, automatically in the others I can only go up to 20%, and so on with everyone, that’s a lot of travel my?

  • if the first is 80% and the 2nd to 15%, the others could only go to 5(the 3rd, 4th, 5th or 6th) ?

  • Yes, I would like to do an equalizer... I found this one, I’m trying to understand how it works.. https://github.com/jhovgaard/jquery.rangegroup

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.