# Range and Thumb Values

Learn about the Thumb Values and Range in C1RangeSlider control.

## Content



**Range** in [C1RangeSlider](/componentone/api/win/online-input/dotnet-framework-api/C1.Win.C1Input.4.8/C1.Win.C1Input.C1RangeSlider.html) control is the difference between [UpperValue](/componentone/api/win/online-input/dotnet-framework-api/C1.Win.C1Input.4.8/C1.Win.C1Input.C1RangeSlider.UpperValue.html) and [LowerValue](/componentone/api/win/online-input/dotnet-framework-api/C1.Win.C1Input.4.8/C1.Win.C1Input.C1RangeSlider.LowerValue.html) properties. These two values are linked with movable thumbs which are used to set the numeric range on the control.

![slider-range"](https://cdn.mescius.io/document-site-files/images/6c2f30e9-4d3a-4f86-b649-ecbef777b3a3/images/rangeslider_range.png)

**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.

DOC-DETAILS-TAG-OPEN

DOC-SUMMARY-TAG-OPEN

To write code in Visual Basic

DOC-SUMMARY-TAG-CLOSE

```vbnet
Me.c1RangeSlider1.LowerValue = 24
```

DOC-DETAILS-TAG-CLOSE

DOC-DETAILS-TAG-OPEN

DOC-SUMMARY-TAG-OPEN

To write code in C#

DOC-SUMMARY-TAG-CLOSE

```csharp
this.c1RangeSlider1.LowerValue = 24;
```

DOC-DETAILS-TAG-CLOSE

Additionally, the thumb values have its associated value changed events. When the lower thumb value changes, it triggers the [LowerValueChanged](/componentone/api/win/online-input/dotnet-framework-api/C1.Win.C1Input.4.8/C1.Win.C1Input.C1RangeSlider.LowerValueChanged.html) event and when upper thumb value is changed, the [UpperValueChanged](/componentone/api/win/online-input/dotnet-framework-api/C1.Win.C1Input.4.8/C1.Win.C1Input.C1RangeSlider.UpperValueChanged.html) 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](https://cdn.mescius.io/document-site-files/images/6c2f30e9-4d3a-4f86-b649-ecbef777b3a3/images/rangesliderfilter.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.

```csharp
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

[C1RangeSlider Appearance](/componentone/docs/win/online-input/usingthec1inputcontr/c1inputcontrols/C1RangeSliderControlOverview/C1RangeSliderAppearance)