RangeSlider

The RangeSlider widget is an input widget that selects a minimum and maximum value at the same time using two handles (thumbs).
Use it to pick a span that has a start and an end, such as a price range or an age range.

Definition and role

The RangeSlider widget draws two handles on a single track. Dragging a handle sets a range made up of a start value and an end value. Set the minimum and maximum bounds, the number of tick divisions, and the colors of the track, ticks, and handles.

• Category: Contents
• Default range: 0 ~ 1

Features

Feature	Description
Range selection	Pick a single span by setting the start and end values at the same time with the two handles.
Minimum and maximum	Set the overall value range with min and max.
Tick divisions	Split the slider into discrete steps with divisions so the value moves one step at a time.
Colors and thickness	Adjust the track thickness (trackHeight) and the colors of the active track, inactive track, ticks, and handles.
Drag actions	Attach actions to run while the value changes, when a drag starts, and when a drag ends.

How to use

1. Open the Contents category in the left widget palette.
2. Drag and drop the RangeSlider item onto the canvas.
3. In the properties panel on the right, set the value range with min and max.
4. Adjust the tick steps with divisions and the appearance with trackHeight and the color properties as needed.
5. In onChanged, onChangeEnd, and the like, connect the action — logic or script — to run when the value changes.

Properties

Property	Description	Default	Value / Type
values	Currently selected range (start and end values)	0 ~ 1	Range value (start–end)
min	Lowest selectable value	0	Number
max	Highest selectable value	1	Number
divisions	Number of tick divisions (discrete steps). Set it and the value moves one step at a time	Not set	Integer (1 or greater)
trackHeight	Track thickness	Not set	Number
activeTrackColor	Track color for the selected span	Not set	Color
inactiveTrackColor	Track color for the unselected span	Not set	Color
activeTickMarkColor	Tick color for the selected span	Not set	Color
inactiveTickMarkColor	Tick color for the unselected span	Not set	Color
thumbColor	Color of the drag handles (thumbs)	Not set	Color
overlayColor	Overlay color while a handle is pressed	Not set	Color

Notes and tips

tip

The start and end of values must fall inside the min–max range. The default range is 0 ~ 1, so set min and max first if you need a different scale.

note

Set divisions and the value no longer moves continuously — it moves only in tick steps. Only integers of 1 or greater are accepted.

Learn more

tip

For the full set of Widget Control (Property, Method, and Event) you can use to script this widget, see RangeSlider Widget Control.