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
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?
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
Antoine
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.
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.
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…
