Decimal numbers are sometimes being cut-off in sliders/range-sliders

[huong-li-nguyen]

Description

Decimal numbers are sometimes being cut-off in sliders/range-sliders.

This seems to only happen when the step argument is not defined. When the step argument is defined the max-width of the input field seems to scale correctly:

However, it doesn't always happen, so it doesn't seem to be a pure CSS issue as e.g. these work:

Expected behavior

Input field expanding to its content and not cutting of digits after the separator.

Which package?

vizro

Package version

0.1.12

Python version

3.9

OS

How to Reproduce

Run any example with sliders

Output

No response

Code of Conduct

• I agree to follow the Code of Conduct.

[nadijagraca]

Initial results of investigation:

The decimal numbers are cut off in the input fields, if the text value has more digits than the sliders/range-sliders max value. In the example below, range slider is defined as vm.Slider(min=1957, max=2007), since step is not defined it defaults to None. If step is None slider will calculate the step size, and based on the dataset in this case step was set to 0.5.

Since selected value 1974.5 has 5 digits and max value (2007) has 4 digits, the last digit of the value in the input field will be cut-off as the max-width of the input field is dependent on the number of digits of the max argument (adding decimal places to max does not help).

Conclusion:
The bug seems to be on Dash (as it can be replicated in a pure dash app), an issue has been raised from our side in the Dash repository: 2791

Until it has been fixed on Dash, we recommend setting the step argument for Slider/RangeSlider such that the text field is not being cut-off and scales accordingly.

[huong-li-nguyen]

@maxschulz-COL - FYI for the bug you've mentioned in the last PR.