MARKETPLACE
PLUGINS
ADVANCE RANGE SLIDER
Advance Range Slider logo

Advance Range Slider

Published January 2025
   β€’    Updated March 2026

Plugin details

🎯 The Bubble Advance Range Slider Plugin offers a comprehensive solution for implementing sophisticated value selection interfaces. This versatile component comes with dual operational modes: a single-handle configuration for discrete value selection and a dual-handle setup for range definition. βš™οΈ Core functionality includes extensive range parameterization, allowing developers to specify minimum and maximum boundaries while establishing precise initial handle positions. The integrated grid system facilitates value visualization through configurable intervals, markers, and highlighted segments, enhancing user orientation within the defined range.
🎨 Visual presentation is addressed through six distinct design paradigms: flat, sharp, big, modern, round, and square. The plugin's robust customization framework enables complete control over the color scheme, encompassing all interface elements from labels to interactive components.
πŸ–±οΈ The interaction model supports multiple manipulation methods, including direct handle manipulation, unified range movement, and selective handle locking for controlled input scenarios. Integration capabilities extend to programmatic control, supporting dynamic value updates, state management, and event-driven workflow triggers.
⌨️ Advanced features include keyboard navigation support, value formatting with customizable affixes and separators, and flexible label management. The visual hierarchy can be enhanced through configurable shadow effects, adding dimensional depth to interactive elements.
πŸ”§ For complex implementations, the plugin maintains component isolation through unique identifier management, enabling multiple slider instances within the same application context without interference. This architectural consideration ensures reliable operation in user interfaces.

$20

One time  β€’  Or  $2/mo

stars   β€’   0 ratings
2 installs  
This plugin does not collect or track your personal data.

Platform

Web

Contributor details

Hashlogics logo
Hashlogics
Joined 2023   β€’   47 Plugins
View contributor profile

Instructions

Installation Steps
  1. Add Plugin to Your Project
    • Navigate to your Bubble.io editor and install the Advance Range Slider Plugin from the plugin marketplace.
  2. Include the Element on Your Page
    • Drag and drop the slider element onto your page.
  3. Configure Unique ID for Each Slider
    • Assign a unique ID to each slider if you are using multiple sliders on the same page.
  4. Customize Slider Settings
    • Configure min, max, from, to, grid, and design settings via the property editor.
  5. Set Actions and Workflows
    • Use the "Set Range" and "Reset Slider" actions for dynamic updates.
    • Add workflows to trigger events when the slider values change.

Configuration βš™οΈ 

General Settings πŸ”§ 
Mode: Choose between Single or Dual modes. 
πŸ”„ Min/Max: Define the minimum and maximum values for the slider.
πŸ“Š From/To: Set initial positions of the left and right handles (for Dual mode).
β¬…οΈβž‘οΈ Grid: Display interval markers along the slider. 
πŸ“ Fixed Handles: Lock handles to prevent user adjustment. 
πŸ”’ Design Settings 
🎨 Style: Select one of six styles: Flat, Sharp, Big, Modern, Round, Square. 
πŸ’« Custom Colors: Define colors for labels, handles, slider lines, and grid elements. 
🎨 Shadow Effects: Add shadows for to and from handles' min and max ranges.
πŸ‘₯ Interaction Settings 
πŸ–±οΈ Keyboard Control: Enable keyboard input for adjusting range. 
⌨️ Drag Range: Allow dragging the entire selected range. 
πŸ”„ Label Settings 
🏷️ Prettify: Add prefixes, postfixes, and value separators for display. 
✨ Customize Labels: Modify label text and visibility. πŸ“

Demo Link:https://pd-advance-range-slider.bubbleapps.io/version-test

Editor Linkhttps://bubble.io/page?id=pd-advance-range-slider&tab=Design&name=index
 
Don't hesitate to reach out - we'd love to hear from you. Contact us at [[email protected]]

Types

This plugin can be found under the following types:
Element   β€’   Event   β€’   Action

Categories

This plugin can be found under the following categories:
Technical   β€’   Productivity   β€’   Ecommerce   β€’   Data (things)   β€’   Small Business   β€’   Input Forms

Resources

Support contact
Tutorial

Rating and reviews

No reviews yet

This plugin has not received any reviews.
Bubble