Slider Bind Value

[sutaungmai]

Here is my current working input tag looks like:

But somehow I got this error message like this:

Here is its use case:

[huntabyte]

You can only bind to an identifier or member expression

[sutaungmai]

Can you break down a little bit. I wasn't clearly understanding.

Really appreciate for the help :)

[huntabyte]

No worries, so by trying to bind: options.length you're basically trying to tell the slider to mutate the length property of what I imagine to be an array of values.

What are you trying to accomplish with the slider exactly?

[sutaungmai]

Basically I was using the slider for increasing and decreasing password length. Here is the parent component looks like:

Here is PasswordOptions component. You will see input there above the slider it works perfectly with range input:

[huntabyte]

Ah, I see what you're trying to do now. Perhaps I will introduce the ability to have a single value for the slider rather than an array if it is a single-value slider.

In the meantime, until I make that update, you should be able to accomplish it like this. You will need to bind:options in the parent component that is providing the options and make the options prop $bindable in this component.

Something like this:

<script lang="ts">
	let { options = $bindable() } = $props()
</script>

<Slider value={options.length} onValueChange={(v) => {
	const newValue = v[0]
	options.length = newValue
})} />

[sutaungmai]

Aha! Thanks a lot. I truly appreciate the time, effort, and care you put into assisting me. It works perfectly now. :)