实现Input Range组数值总和为100：均等分配增减量功能

需求 #

开发一组Input Range滑块，要求所有滑块数值总和始终保持100。具体要求：

• 调整某一滑块使其增加X%时，其余滑块均等减少对应总量，保证总和不变
• 调整某一滑块使其减少X%时，其余滑块均等增加对应总量，保证总和不变

现有代码 #

CSS #

.btn {
    background: #0075ff;
    padding: 10px;
    color: white;
    border-radius: 5px;
}

HTML #

<div>Total : <span id="total">0</span></div>
<div>
    <input type="range" min="0" max="100" step="5" class="price" />
    <div class="input-v">0</div>
</div>

<div>
    <input type="range" min="0" max="100" step="5" class="price" />
    <div class="input-v">0</div>
</div>
<div>
    <input type="range" min="0" max="100" step="5" class="price" />
    <div class="input-v">0</div>
</div>
<div>
    <input type="range" min="0" max="100" step="5" class="price" />
    <div class="input-v">0</div>
</div>
<div>
    <input type="range" min="0" max="100" step="5" class="price" />
    <div class="input-v">0</div>
</div>
<div>
    <input type="range" min="0" max="100" step="5" class="price" />
    <div class="input-v">0</div>
</div>


<br />
<a class="btn">Calculate</a>

原有jQuery实现 #

$(document).on('click', '.btn', function () {
       
    var sum = 0;
    $('.price').each(function () {
        sum += Number($(this).val());
        $('#total').text(sum);
    });

    if (sum > 100) {
        var p = sum - 100
        var q = sum - p
        $('#total').text(q);
        var r = $('.price').length;
        var t = parseInt(q / r);
        alert(t)
        $('.price').each(function () {
            var u = $(this).val();
            $('.price').val(u + t);
        });
    }
})

解决方案 #

原有代码仅通过按钮点击调整总和，无法实现滑块实时调整时的均等分配。以下是修改后的实现，支持实时拖动滑块并自动分配增减量：

// 页面加载时初始化滑块值，均分100
$(document).ready(function() {
    const sliderCount = $('.price').length;
    const initialValue = Math.floor(100 / sliderCount);
    $('.price').val(initialValue).data('prev', initialValue);
    $('.input-v').text(initialValue);
    $('#total').text(100);
});

// 监听滑块拖动事件
$(document).on('input', '.price', function() {
    const $current = $(this);
    const currVal = parseInt($current.val());
    const prevVal = parseInt($current.data('prev'));
    const diff = currVal - prevVal; // 当前滑块的变化量
    const sliderCount = $('.price').length;
    const otherCount = sliderCount - 1;

    if (otherCount === 0) return; // 单个滑块无需处理

    // 计算每个其他滑块需要调整的量，取整保证总和准确
    const adjust = Math.round(-diff / otherCount);

    // 更新其他滑块的值，同时控制在0-100范围内
    $('.price').not($current).each(function() {
        let newVal = parseInt($(this).val()) + adjust;
        newVal = Math.max(0, Math.min(100, newVal));
        $(this).val(newVal).data('prev', newVal);
        $(this).siblings('.input-v').text(newVal);
    });

    // 更新当前滑块的记录值和显示
    $current.data('prev', currVal);
    $current.siblings('.input-v').text(currVal);

    // 校准总和，处理取整误差
    let total = 0;
    $('.price').each(function() {
        total += parseInt($(this).val());
    });
    if (total !== 100) {
        const fix = 100 - total;
        const $first = $('.price').first();
        $first.val(parseInt($first.val()) + fix);
        $first.siblings('.input-v').text($first.val());
        total = 100;
    }
    $('#total').text(total);
});

// 保留原按钮功能（可选，实时调整后可移除）
$(document).on('click', '.btn', function () {
    let total = 0;
    $('.price').each(function () {
        total += parseInt($(this).val());
    });
    $('#total').text(total);
});

功能说明 #

• 初始均分：页面加载自动把100平均分配给所有滑块，保证初始总和正确。
• 实时调整：拖动滑块时立即计算变化量，自动将增减量均分到其他滑块。
• 边界限制：所有滑块值被限制在0到100之间，不会出现无效数值。
• 误差校准：处理取整导致的总和偏差，确保最终总和始终为100。

内容的提问来源于stack exchange，提问作者atul245