将两个数字输入绑定到变量，以便一个输入始终大于或等于其他

Question

我想要两个输入：

• 输入 A 初始包含一个名为 “min” 的 prop，显示输入中可能的最大数量
• 输入 B 初始包含一个名为 “max” 的 prop，显示输入中可能的最大数量

这些输入的值必须始终在 min 和 max 属性之间，并且输入 A 值始终小于或等于 输入 B 值。

输入的值必须存储在两个不同的变量中或一起存储在数组或对象中，以便我可以轻松访问它们。

---

注意

根据我的经验，将值保持在最小值和最大值之间非常容易，并且不会影响主要问题。因此，如果您不想将其包含在您的解决方案中，那也没有问题。在“我尝试过的”部分中，我有时完全忽略了这一点。

---

变量不会强制彼此更改值以保持输入 A 值小于输入 B 值。因此，如果输入 A 值增加并达到输入 B 值，它将停止并且不会升高。对于输入 B 也是如此，如果减小其值使其达到输入 A 值，则输入 A 值不会改变并且输入 B 的减小停止。

一开始这可能看起来很容易，但大多数时候，如果您尝试使用绑定来解决它，那么解决方案就是一种方法，否则事情会变得过于复杂并且与纯 JavaScript 非常相似。一方面，我的意思是一个输入的值的增加或减少可能不会影响另一个输入，但另一方面，输入的变化也会改变另一个输入。例如，看一下 AI 生成的这个示例：

<script>
  export let min = 0;
  export let max = 100;

  let minInput = min;
  let maxInput = max;

  $: {
    // Ensure minInput is within the allowed range (and doesn't change maxInput)
    if (minInput < min) {
      minInput = min;
    } else if (minInput > maxInput) {
      minInput = maxInput;
    }

    // Ensure maxInput is within the allowed range (and doesn't change minInput)
    if (maxInput > max) {
      maxInput = max;
    } else if (maxInput < minInput) {
      maxInput = minInput;
    }
  }
</script>

<div>
  <label for="minInput">Min:</label>
  <input type="number" id="minInput" bind:value={minInput} />
</div>

<div>
  <label for="maxInput">Max:</label>
  <input type="number" id="maxInput" bind:value={maxInput} />
</div>

<p>Min: {minInput}</p>
<p>Max: {maxInput}</p>

我尝试过的：

将输入绑定到数组并对其进行排序

我尝试将输入值绑定到数组的成员，并使用反应式声明始终对该数组进行排序，因此索引 0 始终较小，索引 1 始终较大，因此输入也是如此。代码是这样的：

<script>
  export let min = 0;
  export let max = 100;

    let inputs = [min, max]
    $: inputs = inputs.sort((a,b) => a - b)
</script>

<div>
  <label for="minInput">Min:</label>
  <input type="number" id="minInput" bind:value={inputs[0]} />
</div>

<div>
  <label for="maxInput">Max:</label>
  <input type="number" id="maxInput" bind:value={inputs[1]} />
</div>

<p>Min: {inputs[0]}</p>
<p>Max: {inputs[1]}</p>

使用反应式语句比较值

这其实有两种方式

1.改变比应有的值更大/更小的值

我尝试查看输入 A 值是否大于输入 B 值，并将输入 A 值设置为输入 B。然而，正如我提到的，这是“一种方式”。我尝试的代码如下：

<script>
  export let min = 0;
  export let max = 100;

  let minInput = min;
  let maxInput = max;

  $: {
    // Ensure minInput is within the allowed range (and doesn't change maxInput)
    if (minInput < min) {
      minInput = min;
    } else if (minInput > maxInput) {
      minInput = maxInput;
    }

    // Ensure maxInput is within the allowed range (and doesn't change minInput)
    if (maxInput > max) {
      maxInput = max;
    } else if (maxInput < minInput) {
      maxInput = minInput;
    }
  }
</script>

<div>
  <label for="minInput">Min:</label>
  <input type="number" id="minInput" bind:value={minInput} />
</div>

<div>
  <label for="maxInput">Max:</label>
  <input type="number" id="maxInput" bind:value={maxInput} />
</div>

<p>Min: {minInput}</p>
<p>Max: {maxInput}</p>

2.当输入 A 值大于输入 B 值时反转绑定

这意味着如果该语句为真，则输入 B 会绑定到绑定到输入 A 的更大值，并使用 if 块对输入 A 执行相同的操作。遗憾的是我没有这方面的例子。

请不要认为这是类似 javascript 问题的重复。我想用 svelte 来做到这一点。

Answer 1

我不确定这是否是您所要求的。我能够得到一些可写的东西。可能有一种更干净的方法来完成此任务，但这仍然有效。我希望这有帮助！

<script>
    import {writable} from 'svelte/store';
    
    let minInput = writable(0);
    let maxInput = writable(100);

    minInput.subscribe(x => {
        if($maxInput < x) maxInput.set(x);
    })

    maxInput.subscribe(x => {
        if($minInput > x) minInput.set(x);
    })
</script>

<div>
  <label for="minInput">Min:</label>
  <input type="number" id="minInput" bind:value={$minInput} />
</div>

<div>
  <label for="maxInput">Max:</label>
  <input type="number" id="maxInput" bind:value={$maxInput} />
</div>

<p>Min: {$minInput}</p>
<p>Max: {$maxInput}</p>