Telerik UI for Windows 8 XAML

The following topic describes all visual elements and terms used in a standard RadRangeSlider control.

Components

The RadRangeSlider control consists of one RangeSliderPrimitive control and two ScalePrimitive controls. Each of these controls could be used as a seperate control.

Rad Range Slider-Components

Elements

These are all visual elements in a standard RadRangeSlider control:

Rad Range Slider-Visual Structire
Legend

Element

Description

ScaleBottomRight

This scale is visualized at the bottom when the orientation of the slider is horizontal, and at right when the orientation is verical. It can be styled through the BottomRightScaleStyle property of the RadRangeSlider.

ScaleTopLeft

This scale is visualized at the top when the orientation of the slider is horizontal, and at left when the orientation is verical. It can be styled through the TopLeftScaleStyle property of the RadRangeSlider.

SelectionStartThumb

This thumb indicates the start of the selected range - associated with the SelectionStart property.

SelectionEndThumb

This thumb indicates the end of the selected range - associated with the SelectionEnd property.

SelectionMiddleThumb

This thumb marks the area between the SelectionStartThumb and SelectionEndThumb.

Track

It represents the track element along which the thumbs are sliding.

Tick

Marks specific values on the scale.

Line

The axis line of the slider scale.

Label

This is the visual representation of the Minimum and Maximum values on the scale.

Header

The header of the RadRangeSlider control.

Tooltips

The RadRangeSlider control also visualizes several tooltips:

  • Value Tooltip

    - Displayed when the pointer enters the scale - shows the value corresponding the current position of the pointer.

    Value Tool Tip
  • Range Tooltip

    - Displayed when the user changes the selection range. The visual structure of the tooltip depends on whether the user drags the middle thumb or one one of the side thumbs.

    • Displays the SelectionStart and SelectionEnd values when the user drags the middle thumb.

      Range Tool Tip-Drag Middle
    • Displays the SelectionStart, SelectionEnd values, and their difference when the user drags the left or the right thumb.

      Range Tool Tip-Drag Right

See Also