Installation Steps
- Add Plugin to Your Project
- Navigate to your Bubble.io editor and install the Advance Range Slider Plugin from the plugin marketplace.
- Include the Element on Your Page
- Drag and drop the slider element onto your page.
- Configure Unique ID for Each Slider
- Assign a unique ID to each slider if you are using multiple sliders on the same page.
- Customize Slider Settings
- Configure min, max, from, to, grid, and design settings via the property editor.
- 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-testEditor Link:
https://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]]