svelte-material-ui icon indicating copy to clipboard operation
svelte-material-ui copied to clipboard

Slider doesn't visually reflect updates to the `max` prop

Open ric2b opened this issue 3 years ago • 3 comments

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

  1. Click the header
  2. 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

ric2b avatar May 20 '21 02:05 ric2b

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

ric2b avatar May 20 '21 02:05 ric2b

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

ric2b avatar May 21 '21 12:05 ric2b

I have run into this issue as well.

nyanpasu avatar May 25 '21 00:05 nyanpasu