[Slider] Expose getThumbIndex prop + API to Slider component

[brandonscript]

Summary

(I admit I don't know if there's a way to do this in v6, or planned in v7, but putting it out here just in case).

With the v5 Slider, there's no way to tell it which thumb index should respond to a value change event – it automatically determines this using closest proximity, via the findClosest function. This is troublesome for cases where you need fine-grained control over this, e.g. if the left/right thumbs are "trim" controls for video playback, while the middle thumb handles scrubbing.

To solve this, I modified the original Slider v5 source here (Gist) where I exposed a getThumbIndex function prop to the Slider component and useSlider hook. Now I can pass this function into the slider so it can determine which thumb should be triggered. I've also augmented it to pass min/max values to this function so that I can determine the % of total slider position.

Would be nice to see this prop exposed in future versions!

Examples

Source code of example: https://gist.github.com/brandonscript/f8d1aa0ec648a5da7fc684fa860f27b0 (modified Slider v5)

Motivation

Search keywords: slider thumb index

[ZeeshanTamboli]

We can introduce this prop, but we should also provide a demo in the docs showing how to use it with a custom method having a valid use-case like yours.