Slider Input Bubble Mobile Free

✅

Link to the plugin page: https://zeroqode.com/plugin/slider-input-bubble-mobile-free-1767791846832x121169495098251150

Demo to preview the plugin:

✅

Live Demo: https://zeroqode-native-demo-09.bubbleapps.io/api/1.1/mobile/preview?debug_mode=true&preview_view=Slider Input Free

✅

Bubble Editor: https://bubble.io/page?id=zeroqode-native-demo-09&plugin=1766163925090x888172911915696100_current&tab=Design&name=Slider+Input+Free&type=page&version=live&elements=bTIaT

Introduction

The Slider Input Bubble Mobile Free plugin provides a customizable slider input component specifically designed for mobile applications built with Bubble’s mobile editor. This plugin allows users to select numeric values within a defined range by dragging a handle along a track.

The slider features smooth animations, customizable appearance options including handle size, colors, and track styling, as well as an optional tooltip that displays the current value during interaction. It supports various animation types (spring, smooth, bounce) for a polished user experience and includes validation to ensure proper configuration.

Prerequisites

This plugin is designed specifically for the mobile version of the Bubble editor. To test the plugin on your mobile device, use the TestFlight app available at: https://testflight.apple.com/join/j73hHPR6

⚠️

Please note that the testing app is currently available for iOS only.

How to setup

Plugin Element - Simple Slider

Visual element designed for numeric input through touch interaction.

Fields

Exposed States

Element Events

Element Actions

Workflow example

Here are some basic workflow examples to get you started with the Slider Input Bubble Mobile Free plugin:

Title	Description	Type
Min Value	The minimum selectable numeric value.	Number
Max Value	The maximum selectable numeric value.	Number
Initial Value	The default value when the component is first loaded.	Number
Step	The interval between selectable values (e.g., 1, 5, 0.5).	Number
Handle Size	Diameter of the slider knob (px).	Number
Handle Color	Background color of the slider knob.	Color
Handle Border Width	Width of the knob’s stroke.	Number
Handle Border Color	Color of the knob’s stroke.	Color
Animation Type	Transition style for handle movement (spring, smooth, bounce, none).	Dropdown
Track Color	Color of the background (inactive) slider track.	Color
Active Track Color	Color of the track progress (left of the handle).	Color
Track Height	Thickness of the horizontal slider line (px).	Number
Track Border Radius	The corner radius of the slider track, defining how rounded the track ends appear.	Number
Show Tooltip	Toggle to display the numeric value above the handle.	Checkbox
Tooltip Color	Customization for tooltip background color.	Color
Tooltip Text Color	Customization for tooltip text color.	Color
Tooltip Offset	Customization for tooltip offset distance from handle.	Number
Disabled	If true, the slider becomes non-interactive.	Checkbox

Name	Description	Type
value	The current numeric value based on the handle’s position.	Number
percentage	The progress of the slider expressed as a percentage (0–100%).	Number
error	Error message.	Text

Name	Description
Value changed	Triggered when the user finishes interacting with the slider (on release/drag end).

Slider Input Bubble Mobile Free

Demo to preview the plugin:

Introduction

Prerequisites

How to setup

Plugin Element - Simple Slider

Fields

Exposed States

Element Events

Element Actions

Workflow example

Basic Slider Setup

Capturing Slider Values

Reset Slider Functionality

Changelogs

Update 07.01.26 - Version 1.0.0