writer-framework icon indicating copy to clipboard operation
writer-framework copied to clipboard

Slider width is not constant if it involves decimals

Open crxi opened this issue 1 year ago • 1 comments

When sliders are used for real numbers with decimal places, their widths are not constant. image

This is because the value printed at the end has variable length. For example, "0.9" and "1.1" are longer than "1" so their sliders are shorter. This is problematic when we click and drag the slider from 0.9 to 1.1. When it crosses 1, the slider is lengthen resulting in jerky movement of the caret as the slider is redrawn with different widths.

Questions

  • Is there a way to make the slider and number output constant width? I don't see any option.
  • Can we show intermediate marks on the slder, or at least the min and max values. It is hard for a user to know the range of possible otherwise.

crxi avatar Feb 03 '24 15:02 crxi

A classic way to get around the problem is to display a tooltip instead of the slider value. Here is an example taken from the material ui document which can serve as a basis for reflection.

Peek 2024-02-04 20-41

We may add options as :

  • Show start / end markers
  • Show steps

FabienArcellier avatar Feb 04 '24 19:02 FabienArcellier