MARKETPLACE
PLUGINS
RANGE SLIDER WITH TAGS
Range Slider with Tags logo

Range Slider with Tags

Published February 2025
   •    Updated October 2025

Plugin details

Range Slider with Tags enhances user interactions by combining a fully customizable range slider with dynamic, interactive tags. Designed for seamless value selection, this plugin provides real-time visual feedback, making it perfect for rating systems, surveys, feedback forms, and more. With extensive customization options, you can define value ranges, labels, colors, and adaptive behaviors to fit your app's needs effortlessly.

Key Features
🎚️ Customizable Range Slider – Configure min/max values for precise control.
🏷️ Dynamic Tag Labels – Tags update in real time based on the selected value, ensuring intuitive feedback.
🎨 Flexible Styling – Modify colors, fonts, borders, and backgrounds for a tailored design.
📊 Live Value Display – Instantly reflect user interactions by showing the current selection dynamically.
🔄 Adaptive Tag Positioning – Tags adjust smoothly with staggered positioning for better readability.
💡 Smooth Animations & Transitions – Enhance user experience with fade-in effects, scaling, and drag interactions.

🔗Demo Link: https://chakor-plugin-demo-7.bubbleapps.io/version-test/range_slider_with_tags
🔗Editor Link: https://bubble.io/page?id=chakor-plugin-demo-7&test_plugin=1739533884355x685271686762201100_current&tab=Design&name=range_slider_with_tags&type=page

Our team is available to solve any problems or questions you may have, please open a thread on our support forum: https://forum.thechakor.com/t/plugin-issues

$3

One time

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

Platform

Web

Contributor details

Chakor logo
Chakor
Joined 2021   •   371 Plugins
View contributor profile

Instructions

1️⃣ Add the "Range Slider with Tags" element to your Bubble page. 2️⃣ Set minimum and maximum values to define the selectable range.
3️⃣ Configure step size to determine the interval between selectable values.
4️⃣ Define custom tags that correspond to specific value ranges (e.g., “Beginner,” “Intermediate,” “Expert”).
5️⃣ Assign colors to tags for clear visual differentiation and enhanced user experience.
6️⃣ Track real-time selections – the slider dynamically updates and highlights the relevant tag as the user moves the thumb.
7️⃣ Publish selected values and tags as Bubble states (e.g., current_value
and current_status) for use in workflows, conditions, or calculations.
8️⃣ Customize the slider’s appearance – adjust track height, border radius, background colors, thumb styles, and tag visibility.
9️⃣ Enable adaptive tag positioning – tags are displayed dynamically above the slider with staggered placement for better readability.

🔗Demo Link: https://chakor-plugin-demo-7.bubbleapps.io/version-test/range_slider_with_tags
🔗Editor Link: https://bubble.io/page?id=chakor-plugin-demo-7&test_plugin=1739533884355x685271686762201100_current&tab=Design&name=range_slider_with_tags&type=page

Types

This plugin can be found under the following types:

Categories

This plugin can be found under the following categories:

Resources

Support contact
Documentation
Tutorial

Rating and reviews

No reviews yet

This plugin has not received any reviews.
Bubble