carbon-components-svelte icon indicating copy to clipboard operation
carbon-components-svelte copied to clipboard

Slider component does not round value when on key [Shift]+[Arrow]

Open automatata opened this issue 2 years ago • 5 comments

Hi. I believe some rounding logic is missed here:
https://github.com/carbon-design-system/carbon-components-svelte/blob/ea7c0d446e989a9435788a9edacdc0542b683da0/src/Slider/Slider.svelte#L166

whereas another part has the rounding logic properly done:
https://github.com/carbon-design-system/carbon-components-svelte/blob/ea7c0d446e989a9435788a9edacdc0542b683da0/src/Slider/Slider.svelte#L87

For instance with the [Shift] key decimal values may appear even when we have step = 1.

automatata avatar Mar 30 '22 16:03 automatata

Can you provide a minimal repro?

metonym avatar Mar 31 '22 02:03 metonym

Can you provide a minimal repro?

Please see https://svelte.dev/repl/ae98c84714d448a799c59a40dbccdc50?version=3.47.0

Basically it's just

<Slider
  min={0}
  max={10}
  value={0}
  step={1}
/>

automatata avatar Apr 14 '22 13:04 automatata

A step multiplier is applied if the shift key. The default value is 4, which is what is causing the decimal values.

In your REPL, I've added a custom step multiplier prop: https://svelte.dev/repl/6403b71d10024cedbd9729eef319482e?version=3.47.0

<Slider
  min={0}
  max={10}
  value={0}
  step={1}
  stepMultiplier={10}
/>

<Slider
  min={0}
  max={100}
  value={0}
  step={10}
  stepMultiplier={10}
/>

metonym avatar Apr 14 '22 16:04 metonym

It's a bit confusing the default multiplier would produce values outside of the valid steps. But if the contract is that it's up to the client to provide a good multiplier to avoid invalid values, then please close the issue.

However another interesting thing I discovered is that different framework implementations of the Carbon Design System treat stepMultiplier differently.

In the live demo here of Carbon itself, given
<Slider min={0} max={100} step={1} stepMultiplier={4} />
the shift key makes the change 4 times as large as the normal step of 1, which gives 4. This also seems to be how Vue's implementation do it, where the shift key changes the value by 10 given the props
min: -50, max: 150, step: 1, stepMultiplier: 10.

In contrast, the implementations for svelte and web components are that the shift key changes the value by (max - min) / stepMultiplier. (Although the latter does perform rounding to valid steps on shift key.)

Just some difference that I spotted.

automatata avatar Apr 19 '22 18:04 automatata

Let's keep this open for now. I'll investigate to see if we can improve the API.

metonym avatar Apr 19 '22 18:04 metonym