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…