Apologies if the title isn’t clear. I’m not sure what this is called. Functionally though, I want a bar with a marker that displays where an internal value is compared to a maximum. The below screenshot is what I’ve been able to craft so far. It’s a group that’s stylized with the red/green and rounded shape. within the group is a slider input with transparent track that shows the appropriate placement based on the value I’m passing to it dynamically.
Thing is, I want a marker to show the related dynamic information like it is, but I don’t want the end user to be able to move the slider around. If I disable the element, I get the translucent marker view in the above image. I’d ultimately like the color to be completely opaque.
I’ve tried other slider plugins and progress bars and I can’t quite seem to get this last little bit to work how I’d like to.
Bubble already has a Slider Input which does this. If you feel there is not enough customisation then there is a plugin ‘Simple Slider Input’ which provides more customisation.
Edit: Typo
The simplest is to wrap your slider in an align to parent group, then put a transparent shape on top of it to block clicks. Falls down if your users go into web inspector and delete the element on top, but that’s a pretty marginal issue.
The other is to create workflows that set a page state (slider loading or similar) to yes/no, then conditionally enable/disable the input based on that page state. You’ll then be able to programatically move the slider whilst enabled, before quickly disabling it again. Not perfect, and pretty clunky, so my preference is the first option for obvious reasons.
There are other, more complex options, but in terms of pure bubble (to my knowledge at least) this is a decent way to handle that particular issue.
It should automatically track if you have a dynamic value set on the slider, but there have been a few occasions when bubble misbehaves and I set values in different ways to make sure dynamic updates happen.
Have a go at setting the value of the slider to a page state, then update that page state and your slider should move. You could also try leaving the normal value empty, then setting the value via a conditional instead, both have worked for me in the past.
The value of the slider is supposed to represent how much a thing favors you. So the initial value is just a ‘do a search for(favor where entity and user equal):each item:sum’ but I do it at the parent group level. Then the sliders initial value is parent groups number + 50
So far it works pretty well, and I only have a few ways to add/remove favor.