I want to have two inputs:

• Input A initialy containing a prop named "min" showing the maximum number possible in inputs
• Input B initialy containing a prop named "max" showing the maximum number possible in inputs

And the values of these inputs MUST always be betweeen min and max props and Input A value is ALWAYS smaller than or equal to Input B value.

The values of inputs MUST be stored in two diffrent variables or togather in an array or object so I can access them easily.

NOTE

By my experience keeping the values between min and max is really easy and does not effect the main problem. So if you don’t like to include that in your solutions there’s no problem with that. In "What I’ve tried" section I sometimes ignored that comepletely.
I do it with a clamp function like this:

function clamp(min, num, max) {
  return min > num ? min : max < num ? max : num
}

The variables do NOT force each other to change the value in order to keep Input A value smaller than Input B value. So if Input A value increases and reaches to Input B value, It stops and does NOT go higher. Same for Input B, if you decrease its value so it reaches Input A value, Input A value doesn’t change and the decrease of Input B stops.

That might seem easy at first, but most of the time the solution is one way if you try to solve it with bindings or things become too compliated and really similar to plain javascript. By one way, I mean as increasing or decreasing value of one input might not effect other one, but in the other way, change in the a input also changes the other one. for example look at this example generated by 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>

What I’ve tried:

Binding inputs to an array and sorting them

I’ve tried to bind input values to members of an array and use reactive declarations to always sort that array so the index 0 is always smaller and index 1 is always bigger and so the inputs are. The code was like this:

<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>

Comparing the values using reactive statements

This is actually two ways

1. Changing value that was bigger/smaller than It should’ve been

I’ve tried to see if Input A value is bigger than Input B value and set Input A value to Input B. However this is "one way" as I mentioned.The code that I tried was like this:

<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. Reversing bindings when the Input A value becomes bigger than Input B value

3. on:change event

This achives the main goal. However, it has a side effect. If you click fast, you can see the number flickers and even sometimes the input A value gets higher than input B value

<script>
    let min = 0;
    let max = 100;
</script>
<input type="number" {max} bind:value={min} on:change={() => min > max ? min = max :{}} />
<input type="number" {min} bind:value={max} on:change={() => min > max ? max = min :{}} />

<p>Min: {min}</p>
<p>Max: {max}</p>

This means if the statement is true, then Input B is binded to Bigger value that was binded to Input A and doing the same for Input A using if block. I don’t have an example for this sadly.

PLEASE do NOT consider this a duplicate of similar javascript questions. I want to do this using svelte.