Range Thumb

Range thumb represents the start-end range inside the slider - it consists of the start thumb, the range track and the end thumb.

The slider's range thumb is drawn corresponding to its RangeStart and RangeEnd values. Users can modify the range start value by dragging the start thumb, the end range value by dragging the end thumb, and both start and end simultenously by dragging the range track.

• RangeStart(double)—Specifies the start value of the range inside the slider.
• RangeEnd(double)—Specifies the end value of the range inside the slider.

Check a quick example on how to define RangeStart and RangeEnd properties:

<telerik:RadRangeSlider Minimum="0"
                        Maximum="100"
                        RangeStart="25"
                        RangeEnd="95" 
                        AutomationId="rangeSlider"/>

Drag Mode

RangeSlider supports different dragging options—only the start thumb, only the end thumb, only the range track or any combination of them. In addition, you can completely disable the drag.

You can control the available dragging options through the DragMode property of the RangeSlider:

• DragMode(Telerik.Maui.Controls.RangeSlider.RangeSliderDragMode)—Defines the available elements of the range thumb that can be dragged. You can choose from:
  • Disabled—drag is not enabled.
  • StartThumb—the start thumb can be dragged.
  • RangeTrack—the range track (the part between the start and end thumbs) can be dragged.
  • EndThumb—the end thumb can be dragged.

Check below some quick examples:

Only Range Thumbs:

<telerik:RadRangeSlider DragMode="StartThumb, EndThumb" />

Only Range Track:

<telerik:RadRangeSlider DragMode="RangeTrack" />

Disabled:

<telerik:RadRangeSlider DragMode="Disabled" />

See Also

• Visual Structure
• Track Configuration
• Range Thumb Styling