Range Slider
The Range Slider allows users to select a range of values (e.g., 100–500) between a defined minimum and maximum. It has a track and two thumbs that users can drag to adjust the start and end values.
Adding a Range Slider Widget
The Range Slider widget is located in the Form Elements section of the Widget Palette. Once added, you can configure its properties from the Widget Properties Panel.
Core Concepts
Two-Thumb Control
Unlike a normal slider, the Range Slider has two thumbs:
Start thumb → lower value
End thumb → upper value
Value Range
Internally tracks:
Minimum bound
Maximum bound
Current selected range between them
Visual Feedback
The selected range is usually highlighted on the track (e.g., a filled segment between the two thumbs), helping users see the active range at a glance.
Interactive Filtering / Settings
Often used to update lists, charts, or search results as the user adjusts the range.
Properties
min
The minimum value of the range.
max
The maximum value of the range.
division
The number of discrete divisions on the slider.
startValue
The initial value of the starting thumb.
endValue
The initial value of the ending thumb.
activeColor
The color of the track between the two thumbs.
inactiveColor
The color of the track outside the selected range.
thumbColor
The color of the draggable thumbs.
thumbRadius
The radius of the thumbs.
trackHeight
The height of the slider track.
onChanged
An action to trigger when the user slides either thumb. Receives an object with startValue (the current start thumb value) and endValue (the current end thumb value).
Default Properties
The Range Slider widget supports all Default Properties.
Use Cases
Use the Range Slider when you want the user to pick a min–max range instead of a single value, for example:
Price filters in e-commerce (₹500 – ₹2000)
Age range or duration range selection
Distance / radius filters (2 km – 10 km)
Rating / score range filters
Any filter or setting where a range is more meaningful than a single number.
Last updated