Custom value text for sliders?

[robin-kestrel]

The Slider component currently accepts a formatOptions prop; if specified, it is used in conjunction with Intl.NumberFormat to (a) set the content of the SliderOutput component and (b) set the aria-valuetext property on the input hidden inside each Thumb component.

This API is perfectly fine for simple cases, but seems limiting for more complex ones. Here's a sandbox with some motivating examples. The first group of sliders shows what is currently possible; the second group of sliders shows what I think is almost currently possible. Replacing the SliderOutput component with a custom label is trivial, but propagating that label to the aria-valuetext property of the corresponding input doesn't seem like it's currently doable — at least, not without a lot of messing around with hooks.

Is there an option I'm missing that would allow custom labels to be propagated to aria-valuetext, for screen readers to pick up? If not, could such an option be added? The simplest thing that comes to mind is a format prop for the Slider component that would accept a (value: number) => string, and would otherwise function basically the same way as formatOptions does now.

[snowystinger]

I think you'd want to pass valueLabel as a child of SliderOutput. That will wrap your value label in an output and add a for attribute for the input. I'm not sure if aria-valuetext is needed after that.

[robin-kestrel]

Thanks for the suggestion! I just tried it; here is a modified sandbox, with

{valueLabel ?? <SliderOutput />}

replaced by

{valueLabel ? (
  <SliderOutput>{valueLabel}</SliderOutput>
) : (
  <SliderOutput />
)}

This change does indeed modify the DOM like you said; however, when I use VoiceOver, it still reads out the unformatted value, in Chrome, Firefox, and Safari.

[snowystinger]

I chatted with our accessibility team and they agree, it'd be nice if the aria-valuetext matched the output element. This may be difficult because the output accepts a ReactNode. The API will need some thought, but I'll convert this to an issue. Thanks for bringing it up!

[robin-kestrel]

Awesome, thank you!