[Slider] Allow fine-grained control of thumb positioning

[ryb73]

Feature request

Overview

I have a slider which has N discrete values. Each value has a label which I intend to align with its position on the slider. The labels have varying sizes and my horizontal space is limited, so in order to properly align the labels with the corresponding values on the slider, the slider would have to recognize varying gaps between values. (e.g. I might have value=1 at x=0, value=2 at x=40, value=3 at x=60 – note that x does not scale linearly with value)

Here's what it would look like visually:

I've put together a POC here which accomplishes this by allowing the library user to override the getValueFromPointer and convertValueToPercentage functions.

Examples in other libraries

None that I'm aware of.

Who does this impact? Who is this for?

This gives more flexibility to developers who are trying to implement precise designs.

[benoitgrelard]

Hey @ryb73,

Would you be able to create a sandbox starting from this demo (https://www.radix-ui.com/docs/primitives/components/slider) by clicking on the codesandbox icon in the bottom right of it.

Then instead of importing @radix-ui/react-slider, import it from a local file where you put the code from your POC and build the example you're trying to achieve.

That would help use understand the use case you are trying to cover.

Thanks!

🙏