🛠️ Setup
Install the plugin in your Bubble app.

Drag the element Advanced Touch Slider onto the page.

(Recommended) Keep “This element can fit height to content” OFF. The element is resizable and responsive.

⚙️ Key Properties (Appearance)

Min / Max / Step – numeric range & increment.

Initial value – starting value. Can be changed later via the Conditional tab.

Value override (dynamic number) – presets/control. If set, it wins over user position and pushes the slider to that value.

Disabled – prevents interaction (slider still displays current value).

Track thickness – height of the bar. Ends are always perfectly rounded.

Colors – track_color, fill_color, handle_color.

Handle size

Handle width / height – explicit rectangle;

Handle size – fallback when width/height are blank (square);

Handle roundness (px) – Bubble-style corner radius in pixels (e.g., 0 = square, 20 = rounded, 999 = pill/circle).

Shadow blur – softness of the handle shadow (doesn’t affect layout).

Motion

Motion duration (ms) – set 150–300 for a gentle snap; 0 disables animation.

Motion easing – ease, linear, ease-in, ease-out, ease-in-out.

Animate during drag – if yes, the handle “lags” with the same motion settings; if no, it follows your finger instantly (recommended).

About debounce_ms
This only throttles the value_changed event in workflows to avoid spamming actions. It does not slow the handle’s movement. Use Motion settings for visual smoothing.

📤 Exposed states

value (number) – current value

percent (number 0–100) – position percentage

is_dragging (yes/no) – true while the user is dragging

⚡ Events (workflows)

Value changed – fires when the value changes (honors debounce_ms)

Drag started

Drag ended

🧩 Element Action (optional)

If you added the action:

Plugins → Touch Slider → Set value

value (number) → jumps the slider to that value and triggers value changed.

🧪 Common Setups

Presets from a Dropdown (no workflows)

Add options like Low (10), Medium (50), High (90).

Bind Value override to:

Dropdown Preset's value's number


Selecting a preset will animate the slider to that value.

Conditional presets

In the element’s Conditional tab:
When Dropdown Preset’s value is “Low” → Initial value = 10 (or set Value override).

Smooth transitions

Set Motion duration (ms) = 200, Motion easing = ease-out, Animate during drag = no.

🚨 Troubleshooting

Nothing moves when I set a preset → Make sure Value override is a number (not empty text).

Event runs too often → Increase debounce_ms (e.g., 200) to throttle Value changed.

Handle looks clipped → Give the element enough height; keep “fit height to content” OFF; parent group shouldn’t clip overflow.

Min/Max not respected → Ensure min < max, step > 0. The slider clamps and rounds to step.

Handle roundness looks off → Use Handle roundness (px) (not percent). It behaves like Bubble’s “Roundness”.

🚀 Live Examples

Live Demo – https://touch-slider.bubbleapps.io/version-test

Editor – https://bubble.io/page?id=touch-slider&tab=Design&name=index&elements=bTHMI