Svelte, используя тип ввода = диапазон с bind: value и max: ползунок показывается неправильно, когда значения и max меняются

Question

Используя Svelte, для входного диапазона (ползунка), изменяющего связывание: значение И макс. От 10 до 20, ползунок показывает неправильное положение, в то время как значения верны? Я предполагаю, что где-то делаю ошибку (или это ошибка?) Кто может сказать ...

Поскольку кажется, что значение не отображается после изменения max, я мог бы решить эту проблему, используя тайм-аут10 мс на переназначении значения. Я думаю, что это позволяет ползунку сначала настроить на максимум, а затем на значение. Фактическое значение и макс верны. Пример в svelte REPL

<script>
    let value=10;
    let max=10;

    function change() {
        value=20;
        max=20;
    }
</script>

<h1 on:click={change}>Click to Change</h1>
<input type=range min=0 max={max} bind:value={value}>
<br>
Value {value} of {max} max.

Answer 1

Как описано в комментариях @Benny, вам нужно добавить "value={value}" для обновления самого элемента input.

И, кстати, если имя bind: соответствует значению, вы можетеиспользуйте сокращение, как описано здесь в документации. так что это будет решение:

<input type=range min=0 max={max} bind:value value={value} />

Обновлен REPL