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