Slider: round handle labels and event values?

[jwasilgeo]

Consider a <calcite-slider> with these params:

step="0.05"
label-handles="true"

It is possible to easily get to this kind of state with JS floating point issues:

Could there be an option to attempt to "round" the value internally (and minValue and maxValue when using a range slider) before communicating it outside of this component?

I'm attempting to work around this in the calciteSliderUpdate event with something like this snippet (but it doesn't fix the rendered labeled handle until later):

let myCurrentSliderValue = +e.target.value.toFixed(2);

[paulcpederson]

Yeah, a prop for number of decimals you'd like to report or something (default to 2) would maybe be a route to go. Or some sort of formatter function that the dev can define which accepts the value and returns a string, maybe?

[jwasilgeo]

I'm happy to give this a go and provide a PR with a little guidance from previous contributors to this component. Not sure if the correct spot would be within bound, translate, or getClosestStep based on what I've been trying deduce so far.

As another default idea, what if it attempts to round based on the step prop's own decimals, if they exist, and someone also provided a rounding Boolean?

If I want step="1", then do something like return +value.toFixed(0).
If I want step="0.05" then do something like return +value.toFixed(2).
If I want step="0.001" then do something like return +value.toFixed(3).

Although looking at this now that I typed it out, there could be a bunch of edge cases I'm not considering. Perhaps then as a first draft, your idea @paulcpederson, for a number of decimals optional prop is a solid way to go.

Again, happy to work on this if I can get some pointers on which method would be the best to jam this into as an optional return value formatter.

[paulcpederson]

Yeah, I think there are more use cases too, like a tile range slider. It goes from 1-12 but really the user would want to see that reported as "world", "streets", "state". Ie. the human readable label for that scale level.

Having the default behavior you've outlined above I thin would be a good step until we figure out a more robust customization strategy.

We may want to use a localized number formatter as decimals are different in different locales (12 000,15 in Swiss-French vs 12,000.15 in American English for example). Seems like https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat is supported in ie11 so we could probably use that. Feel free to pr, or I can take a look maybe next week!

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[github-actions]

This issue has been automatically closed due to inactivity.