Forum Academy Marketplace Showcase Pricing Features

Get a text input & a slider to work together

Hi Bubblers,

I have a text input that shows the price of something and I would like to let the user change this field by editing it (typing directly) or by using a slider.

I added a condition to that input element, something like: initial content = slider’s value.

When I move the slider it works nice and smooth :slight_smile:

However, when the user types a number to the input field directly, it stops being affected by the slider (I guess because it’s not an “initial content” anymore.)

Anyone knows how can I let the user edit the text input by dragging a slider and typing directly to it?

Thanks

Hi!

You will have to create two workflows:

One to change the value of your input when the slider changes.
Other to change the slider’s value when the input’s value changes

This will cover both cases :slightly_smiling_face:

hello @fish !
You can create your own slider with Splide.js !
or
may be use fixe floatinggroups witch update “onchange value”
it’s up to you now :wink:
Antoine

Thanks guys!!
But that’s not exactly what I need.

I just need to know how I can change a text input’s value from condition or workflow? (and not only the “initial content” value).

Hope someone can help.
Thanks

Create a Custom State in your page, than link the input’s text value with this Custom State.
In your workflow, change the custom state value. The input will updata automatically.

Thanks @rpetribu,

I tried to solve this with a custom state.

The only problem I have with this solution is that the Slider Input is triggering a workflow event only when the mouse is up, in other words - If the user moves the slider right and left, I will not be able to capture value in real-time.

My current setup updates the value (initial content) of the text input as the user moves the slider in real-time.

I just want to keep that behavior, and also let the user edit that text input directly.

Any ideas?

Hi @fish !

Hummm… are you using Bubble’s native slider component?

I don’t know if you will be able to to it with the native Bubble’s Slider. This component does not offers large variety of actions/events. I am using the plugin below. It is much better.

Here’s an example of me doing what you want, using custom states and the plugin above…

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