Slider: range mode aria-valuenow isn't related to actual values

[ribrown-bishs]

Describe the bug

When using the slider with step 5, min 10, max 50, I would expect that the aria-valuenow would reflect the steps' values when they are selected. However, the aria-valuenow is instead a copy of the style="left: ... percentage.

Reproducer

https://codesandbox.io/s/primereact-test-forked-31vw6s?file=/src/index.js

PrimeReact version

9.2.2

React version

18.x

Language

TypeScript

Build / Runtime

Create React App (CRA)

Browser(s)

No response

Steps to reproduce the behavior

1. Drag one of the handles of the slider
2. Inspect the slider handle element
3. View the aria-valuenow (as compared to the steps that should be there, between 10-50 by fives)

Expected behavior

The handle's aria-valuenow value should be the same as the "selected" step value. In this example, if I drag the left side handle up 1 step, the value should be 15.

[melloware]

I actually think the bug is its not respecting the step either? When I set step={5} on your example the first slide is to 12.5 not 5.

[ribrown-bishs]

Hm. That part seems to be working for me, I updated the sandbox to show the selected values to help.

[melloware]

Thanks but then isn't there another bug because you have the initial value const [count, setCount] = useState([10, 50]); yet mine is starting at 0 which it should not. It should be starting at 10 no?

[ribrown-bishs]

I don't think so because the min prop is set to 10.

[melloware]

but this is how its sets the initial value.

const value = props.range ? props.value || [props.min, props.max] : props.value || 0;

in your case props.value = 10,50 which would mean value is 10 for the low range?

[ribrown-bishs]

Sorry, you're correct, I misunderstood.
Yeah, if you're seeing 0 in there - when the min is set AND the initial lower value is set - then something seems wrong.
I haven't seen that, but I have seen that the aria-valuenow isn't set until the user interacts with the slider.

[melloware]

Yep definitely a bug or bug(s) here with Range mode.

[ribrown-bishs]

For the aria issue, seems like around this line the left/bottom value could be replaced by the props.value[0/1]?

primereact/components/lib/slider/Slider.js

Line 203 in 26d6817

aria-valuenow={leftValue || bottomValue}

[melloware]

Here is how those values are calculated.

const handleValueStart = ((value[0] < props.min ? props.min : value[0] - props.min) * 100) / (props.max - props.min);
const handleValueEnd = ((value[1] > props.max ? props.max : value[1] - props.min) * 100) / (props.max - props.min);