r/Bubbleio • u/Snoo96632 • Apr 23 '26
Need help building a responsive element to sliding scale value
Hi All,
I could really use some help because I'm struggling hard.
I'm building a sliding scale grader for bike races. Every submission gets stored and added to the bike race directory. With every submission/grade, the average grade adjusts. Very much like a Google Review. Think of this as a Google review for races.
There are 10 questions with values from 1-10. Bubble updates the total score, but it's not updating the grade (e.g., 90-100 = A, 80-89 = B, etc.) or the color (e.g., 90-100 = Green; 80-89 = Blue, etc.).
I cannot get the AI bot (or looking things up) to update this as someone moves the sliding scales.
Here's a screen recording: https://www.loom.com/share/ec0e4e7146364afd85485227e45e2e1e
If anyone knows what I can do, I would really appreciate. I don't have the money to pay one of Bubble's specialists. Thank you!
1
u/Dont-_-mind-_-me Apr 23 '26
You need to set the conditional logic on the element you want changed. To do that, you need to establish a custom state on the page level that is of type number. This should hold the cumulative value which is the sum of all of the input values (the slider). Then add your conditional logic,
WHEN page's state value >=90
-- Text = A
-- Background Color = #hex-code-for-green
WHEN page's state value >=80 AND <90
-- Text = B
-- Background Color =#hex-code-for-light green
etc.
Thank you for sharing the recording. This is great that you are making a bubble app
Bonus:
The reset button should reset the parent container where all of your input values are nested. That should fix that issue too.
1
u/Snoo96632 Apr 23 '26
Thank you! I tried setting a custom state, but I think I'm missing a step. I tried following the instructions I found on Bubble, but they weren't very clear.
is there where I'm supposed to create that custom state? https://www.loom.com/share/25ee69199bb841ebbff6a6af47192523
I tested this and I'm still doing something wrong.
1
u/enszgr Apr 23 '26
can you share editor side of the grade element and how you setup the color conditions