如何对输入类型范围进行分组并保持 100% 组合在一起的所有范围的最大值

Question

我一直在尝试创建 4 个输入类型范围，所有这些 (4) 的总和为 100。例如：

Range 1 : 20%
Range 2 : 20%
Range 3 : 20%
Range 4 : 40%

如果我将 Range 4 的值拖到 50%，我希望得到以下结果：

Range 1 : 20%
Range 2 : 20%
Range 3 : 10% (last/previous range that was dragged)
Range 4 : 50%

一般概念：

我有一个包含所有类型范围的 id 的数组。这个数组是在页面加载时创建的 - 所以当页面加载时，数组看起来像这样：

["fitness-range","social-range","gourmet-range","street-range"]

代码：

var current_total_percentage = 0; // To have the total percentage
var slider_indexes = []; // The array which holds the id's of type ranges

// Loop each type range and add it's value to the total percentage
jQuery('input[type=range]').each(function (index, value) {
    current_total_percentage += parseInt(jQuery(this).val());
    slider_indexes.push(jQuery(this).attr("id")); // Add the id to the array

});

每次拖动输入范围时，我都会将其 ID 移动到该数组的第一个位置，以了解最后拖动了哪个范围 => 这意味着如果增加或减少另一个范围，则最后一个范围应该更改值。

移动功能：

arraymove(slider_indexes, slider_indexes.indexOf(jQuery(this).attr("id")), 0);

function arraymove(arr, fromIndex, toIndex) {
    var element = arr[fromIndex];
    arr.splice(fromIndex, 1);
    arr.splice(toIndex, 0, element);
}

我已经尝试了很多东西，但要让它发挥作用非常具有挑战性，所以任何提示都将不胜感激。

注意事项：

1) 范围值更改 10 的步长。这意味着每次更改范围值时都会变为 +10 或 -10。

2) 减小范围时，我想将最后拖动的范围减小/增加 10，以便始终保持 100%。

3) 如果一个范围被拖动到 100%，则所有其他范围必须变为 0%，即出现在数组中的同一行。

编辑 1：我的解决方案直到现在 -> https://jsfiddle.net/7q569ugo/10/ ，如果您将范围拖动得太快，或者单击范围的行，它将不起作用。

Answer 1

我认为您可以更轻松地计算当前滑块上的差异，然后将该差异应用于前一个滑块。

var current_value = parseInt($(this).val());
var previous_value = parseInt($(this).data('previous-value'));
var difference = current_value - previous_value;

那么你必须处理上一个滑块是否超出范围（低于 0 或超过 100）。

https://jsfiddle.net/htd8x2jz/1/

恐怕这不是最干净的失败到下一个滑块的解决方案，它实际上应该是一个循环遍历数组直到返回应该更新的滑块的方法。但是 jsfiddle 应该足以让您上路。

我个人建议在拖动时调整所有其他滑块，例如，您描述的方式会使将它们全部设置为 25% 非常困难。我很感激这不是你的问题，但我想我会提到它。

Answer 2

我没有测试过这段代码，但是你可以对你的问题的解决方案有一个基本的想法。此外，您只需记住之前移动的滑块，您必须记住之前移动顺序中的所有滑块。

$(document).ready(function(){

var slider_indexes = [];
var i=1;
jQuery('input[type=range]').each(function (index, value) {

var RangeId=jQuery(this).attr("id");
var RangeVal=jQuery(this).val();
var RangeInfoObject= 
{"RangeId":""+RangeId+"","RangeVal":""+RangeVal+"","DragOrder":""+i+""}
slider_indexes.push(RangeInfoObject); // Add the object to the array
i++;
});

$("[type=range]").change(function(){
var DarggedId=$(this).attr("id");
var newval=$(this).val();
var RangeInfoObject=slider_indexes.find(x => x.RangeId==DarggedId);

var PreviousVal=parseInt(RangeInfoObject.RangeVal);
var PreviousDragOrder=parseInt(RangeInfoObject.DragOrder);
var flag=0;
    $.each(slider_indexes, function(i, item) {
       if(item.RangeId==DarggedId)
       {
          item.DragOrder=1;
          item.RangeVal=newval;
       }
       else
       {
           if(parseInt(item.DragOrder)<PreviousDragOrder)
           {
              item.DragOrder=parseInt(item.DragOrder)+1;
           }
           if(newval<PreviousVal && flag==0)
           {  
              if(item.RangeVal<100)
              {
                  item.RangeVal=parseInt(item.RangeVal)+10;
                                  $("#"+item.RangeId).val(parseInt(item.RangeVal));
                  flag=1;
              }
           }
           else if(newval>PreviousVal && flag==0)
           { 
              if(item.RangeVal>9)
              {
                  item.RangeVal=parseInt(item.RangeVal)-10;
                  $("#"+item.RangeId).val(parseInt(item.RangeVal));
                  flag=1;
              }

           }
       }
    });
    //Here you need to sort slider_indexes e.g Order by DragOrder
    slider_indexes.sort(function(obj1, obj2) {

        return parseInt(obj1.DragOrder)- parseInt(obj2.DragOrder);
    });
  });
});

这是小提琴。 https://jsfiddle.net/mian_umer/m15g9nky/