# 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,

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

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 ). 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

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.