Customizable Vertical Range Slider Plugin Documentation

Overview

The Customizable Vertical Range Slider plugin provides a highly flexible and visually customizable vertical slider for Bubble applications. It supports single or double values, real-time updates, custom pointer styles, colors, tooltips, and precise layout control — all built on top of the powerful noUiSlider engine.

This plugin is ideal for apps that require advanced range selection with full design control and smooth user interaction.

---

Description

The Customizable Vertical Range Slider allows you to create vertical sliders with complete control over appearance and behavior. You can define minimum and maximum values, choose between single-value or range sliders, customize pointer size and style, apply hover effects, display tooltips, and dynamically update values in real time.

The slider automatically adapts when properties change, ensuring consistent alignment and smooth interaction even when sizes or styles are updated.

---

Main Features

🎚️ Single & Range Slider Modes

• Single value slider or double (range) slider.
  
• Optional draggable range selection.
  
• Configurable starting position.
  

🎨 Full Visual Customization

• Adjustable slider width and roundness.
  
• Custom fill color for the active range.
  
• Multiple pointer styles: circle, square, and premium.
  
• Custom pointer size, border color, background color, and hover color.
  
• Fully centered pointer alignment regardless of size changes.
  

🧭 Vertical Orientation & Precision

• Vertical slider layout.
  
• Smooth dragging and precise value updates.
  
• Values automatically formatted and rounded.
  

💬 Tooltips & Marks

• Optional value tooltip displayed on the pointer.
  
• Optional top and bottom value marks.
  
• Clean, borderless tooltip design.
  

⚡ Real-Time Updates

• Values update instantly while dragging.
  
• Automatically recalculates layout when properties or values change.
  
• Stable alignment even during continuous interaction.
  

---

Use Cases

📊 Data Filtering

• Select numeric ranges such as price, score, or rating filters.
  
• Ideal for dashboards and analytics tools.
  

🎚️ Settings & Controls

• Control volume, intensity, progress, or thresholds.
  
• Perfect for configuration panels and control interfaces.
  

🎨 Creative & UX Interfaces

• Adjust visual parameters like opacity, zoom, or size.
  
• Useful in design tools, editors, and interactive experiences.
  

Try It Risk-Free 

Subscribe to try the plugin safely. If you cancel a few days later, you will be charged only for the time used (e.g., monthly price $3 → $0.10 per day for 30 days).