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: