Step 1: Drop into your Bubble Native app
Install Solid - Customizable Slider from marketplace

Element auto-fills container (flex: 1)

Step 2: Configure range
Essential properties:

min_value - Minimum value (default: 0)

max_value - Maximum value (default: 100)

initial_value - Starting position

step - Increment size (1, 5, 10, etc.)

Step 3: Customize appearance
Track styling:

slide_arrea_color - Unselected track

slide_arrea_selected_color - Filled portion

slide_arrea_border - Track border

Thumb styling:

slider_color - Thumb background

slider_size - Thumb diameter (default: 24)

slider_border - Thumb border

Tooltip styling:

tooltip_background_color - Tooltip background

tooltip_border - Tooltip border

tooltip_gap - Distance from thumb

Step 4: Use the value
Auto-publishes:

value - Current slider position (real-time)

Example workflow:

Slider value > 50 → Show premium plan

Slider value → Calculate price dynamically

Slider value → Set volume, brightness, etc.

Perfect for:

Pricing calculators

Volume/brightness controls

Quantity selectors

Rating sliders

Filter ranges (price, distance, age)