# 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

* [Visual Structure](https://www.telerik.com/winui/documentation/controls/radrangeslider/visual-structure)
* [Styles](https://www.telerik.com/winui/documentation/controls/radrangeslider/styles)