Range slider bar colour customization per section Declined - Not Valid

Hello,

We would like to use the Range Slider component as a UX solution for delimiting thresholds between 3 sections.

We want to highlight each section with a different colour. For example, the end result might look something like this:




I can also give you a bit of details about what we've tried to achieve this so far:

We managed to customize the colour of the range selection (eg. yellow section in the middle above), but had trouble customizing the rest of the bar. More precisely, we couldn't set different colours for the left and the right section.

We also tried using a CSS gradient for the underlying bar, but the end result wasn't quite desirable because it didn't support animations. The slider handles would move smoothly, but the background colour would change abruptly.

In the end, we just wrote our own custom component but it doesn't have all of the features of your range slider component.

We would like to re-use the same UX pattern in multiple places in our apps and it would be of great help to us if you could add these customization features to the range slider component.