Slider - evenly spaced values

[vaunus]

Hello. I am reimplementing a website I built many years ago, this time using ChakraUI. Right now I am rebuilding the old jQuery slider component using Chakra's Slider. I nearly have this working but have run into an issue.

So far, I have wrapped Chakra Slider and can pass my wrapper component a fixed array of values that the SliderThumb sticks to. This works really well. The issue I have is the values I am fixing to are displayed proportionally which leads to them being really crammed on one end of the slider and really spread out on the other. I want them to be evenly spaced across the slider. Right now I can't see a way to achieve this - does anyone have any ideas please?

My wrapper of Chakra Slider looks like this right now:

Whereas the original looks like this which is what I am trying to achieve:

[vaunus]

Never mind, I figured this out. If anyone comes across this, I changed the Chakra slider to a step of 1, then then set 0 as the min, and max to the array length-1 of my array of fixed values which get passed into the wrapper component. Then treat the selected value of Chakra slider as an array index within that array of values to work out what value is selected. The step of 1 between values gives the fixed spacing and then I set the labels to the values in my outer array of values.