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).
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. The requirement can be easily implemented using C1RangeSlider as follows.
Set C1RangeSlider's Minimum and Maximum Values and Customize the Appearance of Thumbs
'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