Explicitly Document how to bind:values, and why it's an Array

[rchrdnsh]

currently I am trying to:

bind:values={[$volume]}

...but I get the following error:

Can only bind to an identifier (e.g. `foo`) or a member expression (e.g. `foo.bar` or `foo[baz]`) (59:3)

...and I honestly only need one value for my use cases (volume slider and timeline, which you have expressed reservations about :-)

so, would it be possible to add a value prop that only takes one number? or is there a way for binding to work with the values prop?

REPL for reference:

https://svelte.dev/repl/9e6d515b510143e4b1b8a7a01940f0db?version=3.29.6

the issue is in the Player.svelte file on line 59.

Thanks a bunch!

[simeydotme]

As for your specific problem, please see issue #11 where I described the solution, and also here's the code working; https://svelte.dev/repl/8945e13fb49b45d598760ba08e8a9c8b?version=3.29.6 :) ... using an array was a trade-off which I have not been able to find a problem with myself... in all instances you may simply store the array instead of an integer.

---

Talking about a single input bind:value={ singleValue } for when the slider only needs one handle.. actually I had this as an option in the beginning as I agree it's a slightly nicer interface, however it started to cause a few problems, specifically to do with data-binding and reactivity. I had no way to detect changes to either a Integer or an Array and the send that data change back to the correct binding. If you know a way to achieve that which is elegant, please go ahead and submit a PR with some examples in the /test/ folder :)

[rchrdnsh]

yeah, I ended up doing this instead, which also worked for me:

$: volumes = [$volume]
$: volume.set(volumes[0])

...then...

bind:values={volumes}

...maybe just add an example in the docs for binding to a value in svelte so as to clear up the confusion? Otherwsise it's not that hard, just didn't know how :-)

Anyway, thanks again! XD

[simeydotme]

I'll take your suggestion for docs improvement. :)

Actually I do note about binding here; https://simeydotme.github.io/svelte-range-slider-pips/#values and demonstrate it here; https://simeydotme.github.io/svelte-range-slider-pips/#min--max ... but I guess I was mistakenly thinking people would read all the docs in order like a book, hah, so I guess being more explicit about binding values and why it's an array input is a nice addition for the docs.

[rchrdnsh]

yeah, I read that part, then when I got into binding in svelte I got new issues for me that I did not know how to deal with, so yes, it would be great to add a little bit more to that section. It's also quite possible that people who are using this component are doing so with svelte, so a little example like you have demonstrated in the REPL for working with svelte bindings might be nice. It certainly helped me :-)