Setting Slider Input Dynamic Range Value

Questions
1

Hi everyone,

This is my first post, so please excuse any faults. I’ve also looked through past posts and didn’t find exactly how to do this.

I’m working on a fairly straightforward search page for a list of items. The search page has a repeating group of items along with a group of search filter components.

On page load, the search filters load a series of basic parameters from the homepage (like airbnb or autotrader.com).

Here is the repeating group search logic:

image
image358×678 21.5 KB

On the search page, I have a slider input to filter search results by price. I’d like this search filter to dynamically populate with the initial search’s max price value.

Here is the search filter logic:
image

I’ve tried setting the slider input’s max value to the current search results’ max price value but this results in the slider range max value = 0 on page load.

image

It works fine if I hard code a value like 100,000. I suspect that my logic in the screenshot above causes a loop which prevents results from loading.

Does anyone have any suggestions on how I can set my slider input’s max value to the max of the initial page load results?

1 Like
2

Interesting challenge.

One way to address this may be to load the RG first and then run a single calculation to set a max value, instead of using dynamic references on UI elements that continually update and are therefore capable of running in loops. More specifically, you could set a default max value (e.g., 100,000) and then run a workflow once the RG is loaded (or similar) and have it set a new max value based on the data that’s displayed.

Since this workflow is only triggered once the RG is done loading, you don’t have to worry about loops.

3

Thanks for the reply @sridharan.s.

How would I go about accomplishing your suggestion above? I tried to find a way to use a workflow to set the slider input’s max value but could not find a way. I’m thinking it should be an Element Action but can’t find one for this specific purpose.

4

You could, for example, reference a custom states value. Set it to default to 100,000. Then, use an action to update the custom states value.

5

Hi @sridharan.s,

I took your suggestion and got pretty close! At least I think I followed your suggestion.

I set a Workflow action to run every .01 seconds that sets the Slider’s custom state value to the max of the repeating group’s price.

The slider max value updates fine initially. The issue occurs after I change my filter criteria on the search page.

For example, initially the RG returns 2 items:
item 1 price = 55k
item 2 price = 10k
slider max value = 55k

Then I change my filter criteria so the RG returns 1 item:
item 2 price = 10k
This in turn sets the slider max value to 10k which is perfect

When removing the filters to include item#1 (price = 55k) the RG filter kicks in and prevents the logic to pick up the new max value.

I’m going to keep trying this and hopefully figure this out.

Let me know if you have other ideas.

6

Ok, I think I have a solution. But it’s not I’m that happy with :grinning:

After putting into words by reply above, I realized that the Repeating Group filter is the culprit breaking everything.

So, I created a duplicate Repeating Group that works off the same search parameters but without the price filter. I then set my initial Repeating Group’s price slider’s max value = to Duplicate Repeating Group’s list of results price max.

It’s not an elegant solution… and can think of at least one major pain moving forward is that as I expand my search and filtering parameters in the future I’m going to have to maintain 2 repeating groups. This is also probably not helping page speed since Bubble has to perform all searches twice. But… it works for now.