Let's Get Acquainted

With the advent of 2015 V1, a RangeSlider shipped with the Input Controls in Studio WinForms Edition. The C1RangeSlider control extends the basic slider control and provides two thumb elements instead of one, allowing users to select ranges instead of single values. C1RangeSlider enables you to select a range of numeric data with lower value thumb and upper value thumb. These thumbs define start and end values of the range. When the thumb is dragged towards the left (or down) on Range Bar its value is reduced, and the value is increased when it is dragged towards the right(or up).

C1RangeSlider_Elements

The control can be used in a variety of applications, enhancing the usability and user interface. It provides a web like user experience in the Windows Forms Application.

Using C1RangeSlider to Filter a Range of Price

Consider the example of an application where there is a huge number of available options and the user’s need is to filter the list depending on a range of value as per his/her choice and needs. One such requirement comes into picture while shopping. The users have a number of options to choose from, and need to filter the list depending on the range of price.

Why would I even want to filter by price? I might have a hard budget limit, or a soft one, "$99.99, not a cent more" vs. "about $100 for a quality product is fine".

Alternatively, price in most applications is the primary sort condition. This could be exploited in the presentation of results. The user would be okay with price sliders if the filtered results change while he/she is sliding, and he/she doesn't have to click another button to apply the filter. As long as the filter is applied while user is sliding, then slider will be helpful. Demo2 The requirement can be easily implemented using C1RangeSlider as follows.

Set C1RangeSlider's Minimum and Maximum Values and Customize the Appearance of Thumbs

Set the minimum and maximum possible values of the range element and customize the appearance of C1RangeSlider control by adjusting thumb style and range bar style.


'Setting C1RangeSlider's Minimum and Maximum Values  
C1RangeSlider1.Minimum = 0  
C1RangeSlider1.Maximum = 300  
C1RangeSlider1.UpperValue = 300  
'Customizing Appearance of Thumbs in C1RangeSlider  
Me.C1RangeSlider1.Styles.ThumbStyle.BackColor = System.Drawing.Color.Tan  
Me.C1RangeSlider1.Styles.ThumbStyle.BorderColor = System.Drawing.SystemColors.ActiveCaptionText  
Me.C1RangeSlider1.Styles.ThumbStyle.CornerRadius = 4  
Me.C1RangeSlider1.Styles.ThumbStyle.HotBackColor = System.Drawing.SystemColors.ActiveCaption  
Me.C1RangeSlider1.Styles.ThumbStyle.PressedBackColor = System.Drawing.Color.Gold  

Handle LowerValueChanged and UpperValueChanged Events of the Slider

The LowerValueChanged and UpperValueChanged events need to be handled such that the data in a container (for example, C1FlexGrid) can be filtered as soon as the user drags the lower or upper value thumbs of the slider.


Private Sub C1RangeSlider1_LowerValueChanged(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles C1RangeSlider1.LowerValueChanged  
lbl_LowerValue.Text = "$" + C1RangeSlider1.LowerValue.ToString()  
Dim filter1 = New ConditionFilter()  
' configure filter to select items whose UnitPrice lies between c1RangeSlider's LowerValue and UpperValue  
filter1.Condition1.[Operator] = ConditionOperator.GreaterThanOrEqualTo  
filter1.Condition1.Parameter = C1RangeSlider1.LowerValue  
filter1.Condition2.[Operator] = ConditionOperator.LessThanOrEqualTo  
filter1.Condition2.Parameter = C1RangeSlider1.UpperValue  

' assign new filter to column "UnitPrice"  
C1FlexGrid1.Cols("UnitPrice").Filter = filter1  
End Sub  

Private Sub C1RangeSlider1_UpperValueChanged(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles C1RangeSlider1.UpperValueChanged  
lbl_UpperValue.Text = "$" + C1RangeSlider1.UpperValue.ToString()  
Dim filter2 = New ConditionFilter()  
' configure filter to select items whose UnitPrice lies between c1RangeSlider's LowerValue and UpperValue  
filter2.Condition1.[Operator] = ConditionOperator.LessThanOrEqualTo  
filter2.Condition1.Parameter = C1RangeSlider1.UpperValue  
filter2.Condition2.[Operator] = ConditionOperator.GreaterThanOrEqualTo  
filter2.Condition2.Parameter = C1RangeSlider1.LowerValue  
' assign new filter to column "UnitPrice"  
C1FlexGrid1.Cols("UnitPrice").Filter = filter2  
End Sub  

Working Samples

PriceRangeSlider-C#
PriceRangeSlider-VB Want to know more about C1RangeSlider, see here.