Svelte实现数字输入框绑定：确保Input A值≤Input B值

以下是符合需求的Svelte组件实现，核心是让两个输入框各自独立维护值，仅通过约束自身来满足Input A ≤ Input B的规则，不会互相修改对方的值：

<script>
    // 接收传入的min和max属性
    export let min;
    export let max;

    // 初始化独立变量，分别对应两个输入框的值
    let inputA = min;
    let inputB = max;

    // 辅助函数：将值限制在[min, max]范围内
    const clamp = (value, lowerBound, upperBound) => {
        return Math.min(Math.max(Number(value), lowerBound), upperBound);
    };

    // 处理Input A的输入变化
    const updateInputA = (e) => {
        const rawValue = e.target.value;
        // 先限制在全局min/max范围内，再确保不超过Input B的值
        inputA = Math.min(clamp(rawValue, min, max), inputB);
    };

    // 处理Input B的输入变化
    const updateInputB = (e) => {
        const rawValue = e.target.value;
        // 先限制在全局min/max范围内，再确保不低于Input A的值
        inputB = Math.max(clamp(rawValue, min, max), inputA);
    };
</script>

<div class="input-group">
    <label>
        Input A:
        <input type="number" value={inputA} on:input={updateInputA} />
    </label>
    <label>
        Input B:
        <input type="number" value={inputB} on:input={updateInputB} />
    </label>
</div>

方案说明 #

• 独立变量存储：inputA和inputB是完全独立的响应式变量，可直接在组件内访问或传递给其他逻辑
• 约束逻辑独立：每个输入框仅修改自身的值来满足规则：
  • 当Input A的输入值超过Input B时，自动将Input A设为Input B的当前值，不会改动Input B
  • 当Input B的输入值低于Input A时，自动将Input B设为Input A的当前值，不会改动Input A
• 范围限制：通过clamp函数确保输入值始终在传入的min和max范围内，可根据需求调整或移除该逻辑
• 无闪烁/复杂逻辑：使用on:input实时响应输入变化，逻辑直接清晰，避免了排序、双向强制修改带来的问题

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