UiSlider: Support for float step

[Michael]

When I pass a float number to UiSlider step prop, the value is always rounded up to integer therefore "1" is the least possible step.

<ui-slider :step="0.5"></ui-slider>
<ui-slider :min="0" :max="1" :step="0.01"></ui-slider>

I think it happens because of a Math.round call in the dragUpdate method:

 this.setValue(Math.round(value)); // line 337

When I remove the Math.round and use integer step - everything seems good. But when I pass a float number, values become a bit messy, because they are not rounded in any way. With step = 0.5 I would expect to receive values like 0.05, 0.1, 0.15, 0.2, etc, but because there is no rounding for float values, I receive some random increments:

I usually see in other libraries that step is used to round the value to the nearest correct value, like this for example:

const remainder = value % step;
value -= remainder;
if (remainder > step / 2) {
  value += step;
}

but I've noticed in the docs that you use step for keyboard and when snapToSteps is on and it is only included in calculations when flags are on. I wonder if you have any ideas how to round the value without using step.

I was able to workaround it and wrap UiSlider in custom component which normalizes the values, but I think it would be a nice thing to support out of the box, because native HTML5 supports it too.

[Adam Jagosz]

I found that a great and easy way to perform snapping floats to multiples of a fraction is the Decimal.js library and its toNearest method. I used it myself for my implementation of UiNumber. Maybe it would be overkill to add a dependency just to support floats in UiSlider, but this is just a pointer to the fact that there are feasible ways of dealing with this.