RangeSlider allows you to handle how the thumbs move on the slider track when a click is performed outside the selected range. By default, only the closest thumb moves along the slider track when the slider track is clicked outside the selected range. However, you can change this default behavior with the help of ScrollBehavior property of the C1RangeSlider class. The ScrollBehavior property lets you drag each thumb individually or drag the center to move both thumbs at the same time using the RangeSliderScrollBehavior enumeration. The RangeSliderScrollBehavior enumeration provides the following options to handle the movement of the LowerValue and UpperValue thumbs on the slider track of the RangeSlider control:
| Enumeration Value | Description |
|---|---|
| None | Stops the movement of both the thumbs. |
| Range | Moves both the thumbs in the direction of mouse by a large distance. |
| Thumb | Moves the closest thumb in the direction of mouse by a large distance. This is the default behavior of the control. |
The following GIF shows how the RangeSlider behaves after setting the ScrollBehavior property to Range.
 |
To change the movement behavior of the LowerValue and UpperValue thumbs, use the following code. This example uses the sample created in the Range topic.
| Index.razor |
Copy Code
|
|---|---|
<C1RangeSlider ScrollBehavior="RangeSliderScrollBehavior.Range" Minimum=-10 Maximum=100></C1RangeSlider> |
|
