How to add segements to a slider?

I am trying to figure out how to add segments to a slider in babylon. Is it possible to have anything close to the image below?

1 Like

This is not supported but I guess you could build it with the gui editor ?

1 Like

Oh this is a cool idea! But you will need to write custom functionality. I will try to whip up something in the editor and playground. Couple questions I have for you.

1 Is the goal to be snap to each of the segments. Or is it just visuals?
2. Can I be between elements. Like 18 hors for example.


Hello again! I went an implemented a little demo version using the GUI Editor and the Playground:

First thing I did in the GUI Editor was create a slider with 5 circles as my segment points. As more of a proof of concept I added everything in pixel values to make it easier, but you should be able to scale this to your needs. I also added this all inside a rectangle do you can grab the entire object.

Next we took it into the playground for the implementation. For the implementation step. I first grab the slider and create an observable for when the slider changes value. We take that value and divide it by our segments (line 35-36). Then we take all the circles and change the active ones (up to the index) to white and the rest to black. :slight_smile:

Overall it’s a bit hard coded to the values I used as an example. But you can expand on it to make it more generic or specific depending on your use case.

Let me know if you have additional questions.


Very nice, love how minimal the js code is for this is too. :slightly_smiling_face: I did make a little change to allow the last ellipse to be clicked to set the slider to the max value.

And tried it out with the values in between selectable, which I really like too, will be bookmarking for later, thanks. :beers:

Edit, oops I mangled one of the linked playground versions typing too fast, but fixed it. :sweat_smile:


@msDestiny14 and @Blake thank you so much for your help!