如何让一个range滑块的最大值随另一个range滑块的值动态变化？

你的需求是让第二个滑块的最大值随第一个滑块的值动态变化（取第一个值的30%或60，取较小的那个），原代码的问题主要是逻辑触发时机不对、变量没有实时更新，以下是修正后的实现：

修正后的完整代码 #

HTML（无需修改） #

<form action="#">
    <div class="range-container">
        <p>Escolha o valor da cobertura de incendio:</p>
        <div class="value-holder">
            <label for="range-basica">R$<span id="range-basica-value"></span>k</label>
        </div>
        <span>min: R$100k</span>
        <input id="range-basica" type="range" min="100" max="500" step="50">
        <span>max: R$500k</span>
    </div>
    <div class="range-container">
        <div class="value-holder">
            <label for="range-eletrico">R$<span id="range-eletrico-value"></span>k</label>
        </div>
        <p>Escolha o valor da cobertura de danos eletricos:</p>
        <span>min: R$10k</span>
        <input id="range-eletrico" type="range" min="10" step="10">
        <span>max: R$<span id="eletrico-max"></span>k</span>
    </div>
</form>

JavaScript #

// 基础滑块（火灾险）
const sliderBasica = document.getElementById("range-basica");
const outputBasica = document.getElementById("range-basica-value");
// 电气损坏滑块
const sliderEletrico = document.getElementById("range-eletrico");
const outputEletrico = document.getElementById("range-eletrico-value");
const eletricoMaxSpan = document.getElementById("eletrico-max");

// 初始化显示值
outputBasica.innerHTML = sliderBasica.value;
outputEletrico.innerHTML = sliderEletrico.value;

// 封装更新第二个滑块最大值的函数
function updateEletricoMax() {
    // 计算30%的值，和60取较小的那个作为最大值
    const calculatedMax = Math.min(sliderBasica.value * 0.3, 60);
    // 设置第二个滑块的max属性
    sliderEletrico.setAttribute("max", calculatedMax);
    // 更新显示的最大值文本
    eletricoMaxSpan.innerHTML = calculatedMax.toString();
    
    // 如果当前第二个滑块的值超过新的最大值，自动调整到最大值
    if (sliderEletrico.value > calculatedMax) {
        sliderEletrico.value = calculatedMax;
        outputEletrico.innerHTML = calculatedMax;
    }
}

// 初始化时先设置一次最大值
updateEletricoMax();

// 第一个滑块变化时更新第二个滑块的最大值
sliderBasica.oninput = function() {
    outputBasica.innerHTML = this.value;
    updateEletricoMax();
};

// 第二个滑块变化时更新显示值
sliderEletrico.oninput = function() {
    outputEletrico.innerHTML = this.value;
};

原代码的问题说明 #

1. 变量未实时更新：原代码中eletricoMax只在初始化时计算一次，后续第一个滑块变化时不会重新计算，导致最大值不会更新。
2. 逻辑触发时机错误：更新最大值的逻辑放在了第二个滑块的oninput事件里，应该放在第一个滑块的事件中，这样第一个滑块一动就立刻更新第二个的限制。
3. 函数调用错误：eletricoMax.toString没有加括号()，导致输出的是函数对象而非字符串值。
4. 未处理值溢出情况：如果第一个滑块的值变小，导致第二个滑块的最大值降低，原代码没有把第二个滑块的当前值调整到新的最大值范围内，可能出现值超出限制的情况。

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