Slider with different thumbs

[boiseiben]

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

[mnajdova]

You can create a custom Thumb component and pass it to the components={{ Thumb: CustomThumb }} prop. Then inside that component you can use the props['data-index'] to figure out what index you are currently rendering. Here is a simple demo of it: https://stackblitz.com/edit/no5i49sd?file=src%2FDemo.tsx

[boiseiben]

Thanks much! I did not know about the data-index prop. The example is very helpful and I recommend adding it to the official docs (if comfortable putting that under the MIT license applicable to the rest). I see the docs tag has been added already so I won't close this pending docs enhancement, but I also won't be bothered if someone else closes it on the grounds that the component doesn't require any modification to support the intended use case.