Slider: Is there a way to change the content of the aria-valuetext property?

[AlmeroSteyn]

I would like to have all screen readers read out the value of the Slider as a percentage.

Is there a way to manipulate the aria-valuetext property written on the range input?

[reidbarber]

You should be able to pass in

formatOptions={{style: 'percent'}}

and have the percent included in the aria-valuetext.

[AlmeroSteyn]

Thanks for taking time to respond! I appreciate that!

It does add % to aria-valuetext. Somehow I missed this in the docs, sorry.

BUT it formats the percentage as thousands. So when it is at 50%, the value text says 5000% for some reason. Min is set as 0 and max as 100 on the range input in the HTML so this is kinda surprising. Will need to see if I can figure out why later.

[reidbarber]

Interesting, feel free to create a codesandbox/stackblitz if you want us to take a closer look at that example.

[AlmeroSteyn]

It is already reproducible in the Storybook example in the docs as it turns out:

https://react-spectrum.adobe.com/react-aria-starter/index.html?path=/docs/slider--docs

If I set the formatOptions prop to:

{
  "style": "percent"
}

It changes the aria-valuetext to thousands of percent:

For that matter, it also formats the Output to that. I reformatted the output in my implementation so I did not notice it before this.

I confirmed that my browser is set to US English so the thousands separator is comma.

[reidbarber]

Oh, I think I see what is happening. The percent format option is just formatting the value, it doesn't have any other context. So .5 = 50%, 1 = 100%, etc. This is just how Intl.NumberFormat() works, which formatOptions goes to.

I think you'll want to set minValue to 0, maxValue to 1, and bring down the step to something like 0.01.

[AlmeroSteyn]

Yeah that kinda makes sense!

Tried it locally and works. Does mean the value for the change event will need to be corrected to make the full solution work, but it will certainly give me what I want.

Thanks for the suggestion!