How to add segements to a slider?

Questions
1

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
3

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

1 Like
4

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.

2 Likes
5

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

https://gui.babylonjs.com/#CFY16A#2
https://playground.babylonjs.com/#VL113A#2

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.

3 Likes
6

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.
https://playground.babylonjs.com/#VL113A#3

And tried it out with the values in between selectable, which I really like too, will be bookmarking for later, thanks. :beers:
https://playground.babylonjs.com/#VL113A#5

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

3 Likes
7

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

2 Likes