Optimize Indicator on a bar to percent position

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.

image

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.

Any solutions or alternate paths?

Thank you.

1 Like

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

I do already utilize bubbles slider input. Is there a way to change how it looks if I enable the “this input is disabled” option?

There are a couple of workarounds for this.

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.

1 Like

The invisible group with the not clickable setting on top was the key. Thank you!

And if someone wants to go through the work to move a slider that doesn’t change it’s represented value that’s fine lol

Glad to help :slight_smile:

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.

I think I have the data down.

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.

Ah ok! I thought you meant it wasn’t working, glad you’ve gotten it sorted.

This topic was automatically closed after 70 days. New replies are no longer allowed.