Controls / RangeSlider

New to Telerik UI for WinUI? Download free 30-day trial

Properties and Configuration

The RadRangeSlider is a compound control that consists of two ScalePrimitive controls and one RangeSliderPrimitive control. In the following sections are described all properties exposed by the RadRangeSlider control and its components.

RangeSlider Properties

  • Orientation: A property of type Microsoft.UI.Xaml.Controls.Orientation that gets or sets the orientation of the control. The available values are:

    • Horizontal: Default value.
    • Vertical

  • Maximum: A property of type double that gets or sets the maximum value of the scale.

  • Minimum: A property of type double that gets or sets the minimum value of the scale.

  • SelectionStart: A property of type double that gets or sets the position of the start thumb on the scale.

  • SelectionEnd: A property of type double that gets or sets the position of the end thumb on the scale.

  • TickFrequency: A property of type double gets or sets the distance between the ticks on the scale.

  • LargeChange: A property of type double that gets or sets a value to be added to or subtracted from the StartPosition/EndPosition. This value is used to update the position of the thumb when the user clicks on the scale outside the selected range.

  • SmallChange: A property of type double that gets or sets the value to be added to or subtracted from the StartPosition/EndPosition.

This is useful, for example, when you want to use another value (different from LargeChange) for the thumbs to snap to.

  • IsDeferredDraggingEnabled: A boolean property that gets or sets a value that indicates whether the SelectionStart/SelectionEnd values will update their values while dragging.

  • TrackTapMode: Gets or sets a value that indicates with what step the selection thumb position will be updated when a tap/click event occurs on the track. This property is an enumeration and exposes the following values:

    • None: The thumb will not move when the track is tapped.
    • MoveToTapPosition: The thumb moves to the current tap position.
    • IncrementByLargeChange: The thumb updates its position with the LargeChange property value.
    • IncrementBySmallChange: The thumb updates its position with the SmallChange property value.

  • SnapsTo: Gets or sets a value that indicates whether the SelectionStart/SelectionEnd values will be snapped after drag is complete. Here are the available options:

    • None
    • Ticks
    • LargeChange
    • SmallChange

  • SliderPrimitiveStyle: A property of type Style that gets or sets the Style that defines the appearance settings applied to the inner RangeSliderPrimitive control part. The style should target the Telerik.UI.Xaml.Controls.Primitives.RangeSliderPrimitive type.

  • TopLeftScaleStyle/BottomRightScaleStyle: A property of type Style that gets or sets the style that defines the appearance settings applied to the TopLeft/BottomRightScale control. The Style should target the Telerik.UI.Xaml.Controls.Primitives.ScalePrimitive type.

  • LabelFormat: A property of type string that gets or sets the format string for the labels. In XAML, the format string has this format: "{}{0:0}".

  • Header: A property of type object that gets or sets the object representing the header content.

  • HeaderTemplate: A property of type DataTemplate that gets or sets the DataTemplate instance that defines the appearance of the header.

  • HeaderStyle: A property of type Style that gets or sets the Style object that defines the appearance of the Header part of the control. Typically that part will be represented by a ContentControl instance.

  • ShowValueToolTip: A property of type bool that gets or sets a value that indicates whether a tooltip, displaying the current pointer value, will be displayed.

  • ShowRangeToolTip: A property of type bool that gets or sets a value that indicates whether a tooltip, displaying the current value range, will be displayed. This tooltip is visualized when the user changes the value range.

  • ToolTipFormat: A property of type string that gets or sets the string that is used to format the text of all tooltips of the component - this includes the start/end/range values displayed in the default RangeToolTip, as well as the value in the ValueToolTip.

ScalePrimitive Properties

When the SliderPrimitive control is used in a RadRangeSlider, some of its properties are overriden by the RadRangeSlider control and setting them in the TopLeftScaleStyle/BottomRightScaleStyle has no effect. These properties are: Orientation, TickFrequency, LabelFormat, and they are bound to their corresponding properties of the RadRangeSlider control.

The following properties are used when setting custom Style to the TopLeftScaleStyle/BottomRightScaleStyle property of the RadRangeSlider.

  • LabelPlacement: A property of type ScaleElementPlacement that gets or sets the position of the labels relative to the axis line.

  • LabelStyle: A property of type Style that gets or sets the style that defines the appearance of all labels of the scale.

  • LabelTemplate: A property of type DataTemplate that gets or sets a custom template for all scale labels.

  • LineStyle: A property of type Style that gets or sets the style that defines the appearance of the axis line of the ScalePrimitive control.

  • TickLength: A property of type Double that gets or sets the length of the scale ticks.

  • TickPlacement (ScaleElementPlacement): Gets or sets the position of the ticks relative to the axis line.

  • TickStyle: A property of type Style that gets or sets the Style defining the appearance of the scale ticks. The Style should target the Rectangle.

  • TickTemplate: A property of type DataTemplate that gets or sets a custom DataTemplate for the ticks.

  • TickThickness: A property of type Double that gets or sets the thickness of the scale ticks.

These properties could be set when the ScalePrimitive is used as a separate control.

  • Orientation: Gets or sets the orientation of the control. This property is an enumeration and exposes the following values:

    • Horizontal (default)
    • Vertical

  • TickFrequency: A property of type Double that gets or sets the logical tick frequency of the scale.

  • LabelFormat: A property of type string that gets or sets the string used to format the control labels.

RangeSliderPrimitive Control Properties

Here are listed the properties exposed by the RangeSliderPrimitive control. These properties are used when setting custom style to the SliderPrimitiveStyle property of the RadRangeSlider. They are of type Style that gets or sets the style that defines the appearance settings applied to the selection start/end/middle thumb.

  • SelectionStartThumbStyle
  • SelectionEndThumbStyle
  • SelectionMiddleThumbStyle

The style should have TargetType="Thumb". The following properties affect the thumb style:

  • Margin
  • Padding
  • BorderThickness
  • Height
  • Background
  • IsTabStop

RangeToolTip Properties

The RangeToolTip is a primitive control which style could be set implicitly by defining a Style that targets the Telerik.UI.Xaml.Controls.Primitives.RangeSlider.RangeToolTip type in the Resources of the RadRangeSlider. These are the properties that affect the Style of the RangeToolTip:

  • Foreground
  • Background
  • BorderBrush
  • BorderThickness
  • FontSize
  • Transitions

See Also

In this article
Related articles
Not finding the help you need?