Skip to main content

Range Picker

The Range Picker control is used to define and select a range of values, providing users with a customizable range selection interface. It allows binding to two options - Min Value and Max Value in a numerical data format.

Range Picker Control
Range Picker Control

Binding Data Options

Range Picker control accepts number format to display data. There are two different numericdata options: Min Value and Max Value.

Static Data Option

Utilize the Bind Data option to set predefined minimum and maximum values for the range. For instance:






RangeSpecifies the minimum and maximum range values.
MinDefines the minimum value allowed within the range.
MaxDefines the maximum value allowed within the range.
StepSpecifies the increment/decrement value for the range.
Min ValueSets the default minimum value within the range.
Max ValueSets the default maximum value within the range.
Disable HandleEnables or disables the range handle to control selection.

Range Properties

Min RangeSets font size, weight, and color for the Min range text.
Max RangeSets font size, weight, and color for the Max range text.

Value Properties

Min valueSets font size, weight, and color for the selected Min value text.
Max valueSets font size, weight, and color for the selected Max value text.

Slider Properties

SliderCustomizes the Slider bar properties.
HeightDefines the height of the Slider Bar.
Filled colorSpecifies the color of the bar indicating the range.
Border radiusDetermines the border's radius for the bar.
Empty ColorSets the color filled up in the slider outside the range.
Slider HandleCustomizes the Slider Handles: Size, Border Radius, and Color.

Control Outputs

The outputs from the Range Picker control, represented by the placeholders {{rangepicker.Min_Value}} and {{rangepicker.Max_Value}}, can be referenced in other controls, data queries, or JavaScript functions using the control's unique name.

Min ValueRepresents the selected minimum value in the Range Picker control.
Max ValueRepresents the selected maximum value in the Range Picker control.


value_changeOccurs when there is a modification in the Range picker control's value. To control the frequency or speed of the change event, you can utilize the debounce property associated with the control.