svelte-material-ui
svelte-material-ui copied to clipboard
Slider doesn't visually reflect updates to the `max` prop
Describe the bug
The Slider component doesn't visually reflect updates to the max
prop (the underlying range input does correctly get an updated max
attribute, though)
To Reproduce https://svelte.dev/repl/a67aeecf3b334778b3640f8aadb2d1e1?version=3.38.2
- Click the header
- You'll see the slider move all the way to the end, even though it should still be at 50%
My guess is that there is some weird interaction with the bind on value
, because it does update but is capped to 10, which is the pre-update max
.
Expected behavior
It should visually reflect the update to max
, like the standard range input does:
https://svelte.dev/repl/7a55a3285482467e9d40c2d505460e8b?version=3.38.2
(Based on the example in this Svelte issue: https://github.com/sveltejs/svelte/issues/3857)
Desktop (please complete the following information):
- OS: Ubuntu 21.04
- Browser Firefox 88.0.1
I wonder if this is related: https://github.com/hperrin/svelte-material-ui/blob/2efc3d2c8e39660a7fff5a1d5df82083a5d175c3/packages/slider/Slider.svelte#L287-L296
Shouldn't line 295 be instance.setValueEnd(end);
?
Although updating min
also behaves weirdly: https://svelte.dev/repl/f58e8671c68a43e6ad92d743dd3ee0d7?version=3.38.2
In the meantime I found a workaround with Svelte key blocks, which allow you to destroy and rebuild their contents when the value of an expression changes.
The workaround looks like this: https://svelte.dev/repl/cdec4ea57d9c420e8d9fd87f6f59d43d?version=3.38.2
I have run into this issue as well.