Selection Range

RadSlider supports the functionality of having two thumbs, thus enabling range selection. To enable the selection range you have to set the IsSelectionRangeEnabled property to true.

Example 1: Enabling Selection Range

<telerik:RadSlider x:Name="slider" IsSelectionRangeEnabled="True" /> 

Silverlight RadSlider Default Selection Range

Modifying the range can be done either via the SelectionStart and SelectionEnd properties or through the Selection property.

  • SelectionStart: Sets the start of the selection range and is of type double

  • SelectionEnd: Sets the end of the selection range and is of type double

Example 2: Setting SelectionStart and SelectionEnd in XAML

<telerik:RadSlider IsSelectionRangeEnabled="True" SelectionStart="0.2" SelectionEnd="0.4" /> 
  • Selection: It is of type SelectionRange and it sets Start and End double values to define the selection range

Example 3: Setting Selection in code-behind

slider.Selection = new SelectionRange<double>(0.2, 0.4); 
slider.Selection = New SelectionRange(Of Double)(0.2, 0.4) 

Silverlight RadSlider Custom Selection Range

MiddleThumbClickMode

The MiddleThumbClickMode property controls the behavior of the thumbs defining the SelectionStart and SelectionEnd properties of the control when you click on the selection range. This property is an enumeration exposing the following options:

  • None: Clicking on the selection range will not affect the current selection of the control.

  • DecreaseNearestThumb: Clicking on the selection range will move the nearest thumb towards the mouse pointer with value defined by the LargeChange property.

MinimumRangeSpan and MaximumRangeSpan

The RadSlider control also exposes properties to control the minimum and maximum distance between its SelectionStart and SelectionEnd values. This distance can be set through the MinimumRangeSpan and MaximumRangeSpan properties.

Example 4: Setting MinimumRangeSpan and MaximumRangeSpan in XAML

<telerik:RadSlider IsSelectionRangeEnabled="True" MinimumRangeSpan="5" MaximumRangeSpan="30" /> 

Example 5: Setting MinimumRangeSpan and MaximumRangeSpan in code-behind

slider.MinimumRangeSpan = 5; 
slider.MaximumRangeSpan = 30; 
slider.MinimumRangeSpan = 5 
slider.MaximumRangeSpan = 30 

Suppress Coercion

Through the IsCoercionSuppressed property you can control whether the slider should coerce the setting of related properties like Selection, SelectionStart, SelectionEnd, MinimumRangeSpan and MaximumRangeSpan.

Example 6: Setting IsCoercionSuppressed in XAML

<telerik:RadSlider IsCoercionSuppressed="True" IsSelectionRangeEnabled="True" MinimumRangeSpan="5" MaximumRangeSpan="30" /> 

Example 7: Setting IsCoercionSuppressed in code-behind

slider.IsCoercionSuppressed = true; 
slider.IsCoercionSuppressed = true 

If set to True, the coercion is done only when the user manipulates the slider and not if the related properties are set in code or through bindings.

See Also

In this article