Single Input to select both X and Y variable inputs?

I need to create an input that he both an X input and Y input with a single point.

It would look something like this

So if a user put a point on this, it would tell them a value for both X (easy/hard) and Y (simple/complex)

Is this possible?

If yes, do you have any documentation of how to do this?

This does this well,

Thanks @jarrad!

I’ll check this out. Are you aware if there’s another way to do this?

Droppable elements may help you out?

It looks like they work. However, how do I get the XY coordinates of the draggable element?

How precise does it need to be? If it’s for an approximate value (ie. 5 point swing up/down, left/right; not for exact X / Y coordinates), you can use a combination of repeating groups and states.

If this is in line with what you’re looking to do, I’ll write up a quick guide on how to set it up.


@dan1 good question! It does NOT need to be exact, it can be on a 0 - 10 point scale. Does that work for how you’re doing it?

Thanks for the help! I appreciate it.

Here’s how to set it up. We’ll base this on a 10x10 grid level of precision.

  1. Create a type in your database called “Number”; you’ll add three fields: number; horizontal value; vertical value. (Map this out in Excel and then use Bubble’s bulk upload feature). Ex. the first entry would have number=1,horizonal=1,vertical=1; the last entry would have number=100,horizontal=10,vertical=10)
  2. Draw a repeating group in your app with 10 columns by 10 rows. Set the data source as “Number” and “Do a search for Numbers” (make sure they are listed in order :smiley: ). For sizing, say 400x400.
  3. Within the repeating group, draw a group thats 40 x 40 pixels. (Set the color to transparent or white). Apply roundness to the shape, if you like.
  4. Draw a vertical shape and horizontal shape for the appropriate axis and inputs.
  5. Set up a custom state somewhere on the page that has a type of “Number”
  6. When the group in the repeating group is clicked, have it change the state you just set up. Set a condition on the Group that corresponds to that cell in the repeating group to turn another color when it matches the state.
1 Like

I had a hunch that was how! This is perfect. Definitely accurate enough and “low tech” enough for me to figure out :slight_smile:

A few questions

  1. In step 3, the roundness of the boxes is what creates the feeling of the moving target right? So the user must click, they cannot drag.

  2. I completely follow except for step 5. For step 5, this is just showing the number of the grid that has been selected, correct?

  3. For step 6, I think I understand this but let me try it and I’ll let you know.

  4. Can you save the final number in a database and parse it out? So the 10s are the X value and the 0s at the Y value, for example?

Re: 1: Correct, in this structure, a user is explicitly clicking one of 100 different groups. The roundness just gives a bit of style to it.

Re: 2 I created a video intro in another thread.

Re: 3: you can reference the custom state’s value in a workflow when you’re creating or updating a thing in the database. Because you’re referencing the thing “Number”, you can pull out the ascribed X and Y values.

Got it. I’m 99% sure I understand. I’ll build this out tomorrow and let you know!

Happy to help, look forward to seeing what you come up with.

This topic was automatically closed after 70 days. New replies are no longer allowed.