How can I create a special slider?

I can’t figure out how to create a special slider and it doesn’t seem to already exist. I need it to have visible “pegs” (or just lines) as you slide it between 1-10 (preferably with the ability to designate how many pegs in the range) and it auto jumps to whichever peg it is closest to when you let go. It needs to almost look like a “health bar.” Instead of a circle slider, you drag the end of the bar to full or empty or anywhere in between and the bar gradually changes colors (designated by properties I would hope based on what peg it is on). I do not know how to modify the appearance of the existing slider or make it behave this way. Can this be created as a component or can it be done with the preexisting slider somehow? As intuitive as this app is (i’m brand new) it seems almost as if I should be able to drag the components into whatever shapes I want but I can only see where I have to input specific numerical values to sizes. I also need to figure out how to attach each slider to each new list item from a list. Could someone direct me to how I might create these?

Do you have any example of what you need?


Haven’t entirely decided if I need to utilize zero or 10, but I would hope there is a way to decide that later.

Basically, you can drag the bar to top or bottom, or the slider bar can maybe even get data from a variable from somewhere else if needed to determine how full or empty it is.

And how will the number of the bar change?

I intend to use it two ways. One being dragged by the user like the normal basic slider and two from a constantly refreshing numeric variable that I will inform from some other yet to be determined function.