Enhancement: Custom labels for slider handles and ticks

[paulcpederson]

Description

Currently the slider supports a labelHandles prop which shows the numeric value of each handle above the slider. There are many cases where the numeric value is not user friendly, and we'd like the ability to set a custom handle text.

Acceptance Criteria

API should allow for dynamically updating the custom handle text in response to changes. We propose adding this via an additional prop formatLabels which accepts a function:

<calcite-slider formatLabels={(value: number) => string} />

This function returns a string and must be synchronous. Each time we render a tick label or a handle label, we call this function if available and render the resulting string instead. If this function is not defined or doesn't return a string, the original value is used.

Relevant Info

I can work on a solution to this for review as we need this for the current release.

This is a more abstract solution to #557 (closed due to inactivity) and is semi related to #2584 as it's the same concept for for handles rather than ticks.

Please respond with thoughts on the API and especially naming as this is a rather esoteric prop concept.

Which Component

calcite-slider

Example Use Case

There are lots of applications of this capability:

• Cleanly displaying current value if slider is stepless and shows long decimals (Slider: round handle labels and event values? #557)
• Locale specific number formatting
• Slider representing currencies having particular formatting requirements
• Slider representing configurable memory or hard drive size (in bytes, kilobytes, megabytes, gigabytes, etc)
• Level of detail selection (ie 0 = "World" and 12 = "Street")
• Non regular interval sliders (logarithmic, exponential, etc)

[benelan]

This came up in a Community question as well.

[github-actions]

Installed and assigned for verification.

[DitwanP]

🚀 Verified on 2.8.0-next.9