Beginner question: Returning image based on slider input

[john.b]

Hi there,

New to the Bubble world, and of course, have some beginner questions.

Current challenge, I have a basic slider set up to allow the user to select a value. I’d like to return an image based on the selection in the slider input (e.g., user slides to 15, and 15.jpg returns).

Some pointers, please?

Thanks!

[andrewgassen]

Do you have an example of this type of interaction being used elsewhere? It feels a bit non-standard to me.

[john.b]

Maybe it’s approached differently, but relatively common experience in the furniture world. As you move the slider, a longer or shorter image of the product is returned. Think of a dining table, with a slider that goes from 60" to 72" to 84" etc, and each time a different dining table is returned.

[andrewgassen]

Oh I see, that makes more sense than what I was interpreting.

So you can use a condition on the image that looks for, “When Slider’s value is #.” Then, change the image source on the image. Here’s a quick screenshot.

[john.b]

Thanks. That makes a lot of sense if I had just a few options on the slider. Then I could set up a series of images with the conditional as you mention, and only the matching image would display.

Of course, this gets tedious and challenging to manage when there are 30+ images. Any other approaches for this situation?

And thanks!

[andrewgassen]

That’s tough. To be honest, having 30 stops on a slider doesn’t sound super intuitive to me, I’d be worried about my ability to drop it where I actually want it to be. Are you married to the slider concept, or would you be willing to try other implementations?

Also, what are the 30 images? Are they different combinations of height, length, and width for the same Table?

[john.b]

Certainly open to other concepts on how to get the customer input.

For the 30 images, yes, different renderings of the table with varying proportions. The task of creating these is easy.

[NigelG]

I would look to have the images in a list of images.

Then return item #slider value from the list.

Rather than trying to dynamically create file names.