[vue3.x] Markers smush together if the value does not match the interval

[Flambe]

Describe the bug

I am using the slider purely to display values (disabling the input). Many of the values I will display are a fraction of a number & have a similar min/max (E.G. 0.00003 with a min/max of 0.000012/0.003). If the interval doesn't match all of these values, then the component visually breaks

Is there a way to disable the interval since it is not useful for my usecase and manually generating an interval that matches all three values could be difficult with floating point weirdness.

Possibly related to #352

Additional context

Simple reproduction case: https://jsfiddle.net/hysnajgr/1/

You can see how most of the markers & value get pushed to the end despite the fact that they should be evenly spaced with the value nearer to the left hand side.

Environment

• Vue version: latest
• Component Version: latest

[NightCatSama]

@Flambe You should set interval, otherwise it defaults to 1.

https://jsfiddle.net/p7Lswnz8/1/

[Flambe]

That was just a simple example to show the issue.

In my actual code I've set the interval as :interval="0.0000000000000001" (as I do not know how many decimals the user requires) but I still get this issue appearing randomly with some sliders: (the input on the left is the value of the green dot)

I would have thought that I should not be seeing this issue with the values in the screenshot and with that interval? Hence my suggestion for an option to disable the interval when its functionality is not required.

[NightCatSama]

There is no way not to use interval, the value of the slider always needs a precision.

Also I can't reproduce the problem: https://jsfiddle.net/yqgts5em/4/

[Flambe]

I have figured out why you were unable to reproduce this issue. I am dynamically generating the min/max so the marks are always evenly spaced from either side. Floating point errors sometimes appear which I believe are causing this issue. https://jsfiddle.net/odjbxv5p/

Strangely the slider at the bottom is still working, despite having the same floating point issues so perhaps I'm wrong? https://jsfiddle.net/odjbxv5p/1/

Would it be possible/reasonable to automatically calculate the interval based on the min/max/value/etc the user has given? Then they can still supply an :interval="..." to override it.

[NightCatSama]

@Flambe

There is no difference between internal and external calculations of components.

It is recommended that you use a third-party library to solve the accuracy problem, which should be fixed.

[Flambe]

I've figured out a quick fix solution by just grabbing the longest decimal place and using that for the interval: https://jsfiddle.net/qwcdzyp0/

Though yeah, generating min/max more accurately is absolutely a better long term solution.

For now though, this issue appears to be fixed for me, thank you for the assistance!