Slider with different thumbs

Summary

I would like to be able to pass different values to the 'slots.thumb' prop to better visually communicate the semantic meaning of each, changing the type of that prop to Array<ElementType> | ElementType, where a non-array is immediately converted to an array of length 1. The thumb elements are picked in the same order presented. If value is shorter (same non-array equivalence to array of length 1), you don't get the thumb elements later in the array; if value is longer it wraps back around, such that the the thumb element for the value at index i is in all cases props.slots.thumbs[i % props.slots.thumb.length].

See also this fixed issue regarding different aria labels on slider thumbs.

Examples

A temperature scale where the "freezing point" thumb indicates a cubic crystal and the "melting point" thumb shows a puddle

Ceiling/floor estimates

Hard-stop limits contrasted from a thumb indicating a target value

Motivation

No response

Search keywords: slider thumbs different

Start at the Slider component and inspect the existing slots.thumb handling and value-to-thumb behavior. Implement support for one or multiple thumb element types with the specified ordering and wrapping rules, then verify that shorter and longer value arrays select the documented thumbs.