Using the C1Input Controls / C1Input Controls / C1RangeSlider Control Overview / C1Range Slider Features / Range and Thumb Values
In This Topic
Range and Thumb Values
In This Topic

Range in C1RangeSlider control is the difference between UpperValue and LowerValue properties. These two values are linked with movable thumbs which are used to set the numeric range on the control.

slider-range"

Setting the Thumb Values

Thumb values can be set using UpperValue and LowerValue properties in properties pane or through code.

By default, the UpperValue property is set to 100, and LowerValue property is set to 0.

To write code in Visual Basic

Visual Basic
Copy Code
Me.c1RangeSlider1.LowerValue = 24
Me.c1RangeSlider1.UpperValue = 88

To write code in C#

C#
Copy Code
this.c1RangeSlider1.LowerValue = 24;
this.c1RangeSlider1.UpperValue = 88;

Additionally, the thumb values have its associated value changed events. When the lower thumb value changes, it triggers the LowerValueChanged event and when upper thumb value is changed, the UpperValueChanged event is triggered. These value change events can be used to trigger actions on other controls. For example, the LowerValueChanged and UpperValueChanged events can filter data in C1FlexGrid as illustrated in the GIF below:

Range slider filter gif

The below code demonstrates use of LowerValueChanged and UpperValueChanged events to filter data in C1FlexGrid control. Here, the filter is applied on the Cost column of the grid.

C#
Copy Code
private void c1RangeSlider1_LowerValueChanged(object sender, EventArgs e)
{
    var filter1 = new ConditionFilter();
    filter1.Condition1.Operator = ConditionOperator.GreaterThanOrEqualTo;
    filter1.Condition1.Parameter = c1RangeSlider1.LowerValue;
    filter1.Condition2.Operator = ConditionOperator.LessThanOrEqualTo;
    filter1.Condition2.Parameter = c1RangeSlider1.UpperValue;
    c1FlexGrid1.Cols["Cost"].Filter = filter1;
    c1Label1.Text = "$" + Convert.ToInt64(c1RangeSlider1.LowerValue);
}

private void c1RangeSlider1_UpperValueChanged(object sender, EventArgs e)
{
    var filter2 = new ConditionFilter();
    filter2.Condition1.Operator = ConditionOperator.LessThanOrEqualTo;
    filter2.Condition1.Parameter = c1RangeSlider1.UpperValue;
    filter2.Condition2.Operator = ConditionOperator.GreaterThanOrEqualTo;
    filter2.Condition2.Parameter = c1RangeSlider1.LowerValue;
    c1FlexGrid1.Cols["Cost"].Filter = filter2;
    c1Label2.Text = "$" + Convert.ToInt64(c1RangeSlider1.UpperValue);
}
See Also