Open in StackBlitz

npm i https://pkg.pr.new/reka-ui@1751

commit: 14edd30

Yo @cyyynthia ! I'm not sure what's the issue here?

The inverted vertical slider seems working fine for me. The pageDown is decreasing value, thus it's going up correctly. Do you mind clarify more the issue?

In an inverted vertical slider, the min value is at the top and the maximum value at the bottom. The directional arrows correctly reflect this direction change, however the PageUp/Down don't.

It's by design that PageUp increase the value, thus in the case of inverted, min at top, max at bottom, PageUp will cause the thumb to go down.

Then the doc for the arrow up & down is incorrect too, as they do properly invert controls in this scenario. It is very confusing that the arrows behave as expected and make the slider correctly go up, when the page up control does not, while they should for the same reason that the controls are inverted for the horizontal bar.

Ahhh you are right @cyyynthia , that is indeed confusing.
Perhaps ArrowUp/ArrowDown should be updated Increments/decrements by the step value depending on orientation.

Nonetheless, I do think PageUp and PageDown should match the behavior of ArrowUp and ArrowDown ; especially considering the fact that the APG describes these two by referencing them to ArrowUp and ArrowDown.

Also, the documentation of the keys is unfortunately quite vague ; horizontal sliders have Left/Right arrows inverted but Up/Down are intact, and vertical sliders have Up/Down inverted but not Left/Right. Clearly explaining the cases in which it's inverted might be beneficial for clarity.

Well, the typo doesn't come from my changes >:)

I added a bit of clarification for keyboard controls, as discussed.

Hi there, are there any updates on this? Either positive or negative, I'd be happy to change things or further discuss anything that might be a blocker for this PR 😄