writer-framework
writer-framework copied to clipboard
Slider width is not constant if it involves decimals
When sliders are used for real numbers with decimal places, their widths are not constant.
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.
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.
We may add options as :
- Show start / end markers
- Show steps