bidirectional Binding input to RangeSlider

[kauaicreative]

The RangeSlider updates the input perfectly. But updating the input field sets everything back to 50. I see that this is related to values being an array. I would guess that most use cases would require a single value.

var value = 50;

<RangeSlider bind:values={value}  />
<input type="number" bind:value  />

[kauaicreative]

This works but wondering what a more elegant svelte solution would be

var value = 50
var values = [value]

<RangeSlider
      bind:values
      on:change={() => (value = values[0])} />

<input
      bind:value
      on:input={() => (values = [value])} />

[simeydotme]

thanks for the comment, @kauaicreative ... the answer to your question is;
https://svelte.dev/repl/a635189fc00c4bbd88bfb2cbecfe0fc1?version=3.32.1

<script>
    let values = [10];
</script>

<RangeSlider bind:values />
<input bind:value={values[0]} />

---

To contest your supposition;

I would guess that most use cases would require a single value.

I think the differentiating aspects of this component are;

1. pips/floats
2. ranges and multi-handles
3. config/styling

I struggled a lot -- and there's another PR/Issue regarding the array format of values -- with the choice to make the values an array. I just found far too many bugs/problems with accepting a single value and binding it back, whilst also supporting an array (which is a hard-requirement). Supporting only an array satisfies both requirements.

I think if you only want a single handle, and you are concerned about using the [0] index of the array, then there's probably another slider component you could use... or you could just use the <input type=range /> native HTML :)

[simeydotme]

I guess I should have an <input /> example in the docs :)