Everything You Need to Know About the WinUI 3 Range Slider
Tags: csharp, dotnet, winui, desktop
Published: 2021-08-27 12:51:00

---
title: Everything You Need to Know About the WinUI 3 Range Slider
published: true
date: 2021-08-27 10:38:54 UTC
tags: csharp, dotnet, winui, desktop
canonical_url: https://www.syncfusion.com/blogs/post/everything-you-need-to-know-about-the-winui-3-range-slider.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/06g2cldqph9glsoao0qo.png
---

The [WinUI 3 Range Slider](https://www.syncfusion.com/winui-controls/range-slider "Link to WinUI 3 Range Slider") control is a highly interactive UI control, allowing users to select a smaller range from a larger data set. The range can be selected by moving the thumbs along the track. Its rich features set includes:

- [Numeric range scale](#numeric-range-scale)
- [Axis labels](#axis-labels)
- [Axis ticks](#axis-ticks)
- [Thumbs](#thumbs)
- [Dividers](#dividers)
- [Vertical orientation](#vertical-orientation)
- [Tooltip](#tooltip)
- [Discrete selection](#discrete-selection)
- [RTL](#right-to-left)

Let’s check out these features and learn how to integrate the WinUI 3 Range Slider control into your application.

## Numeric range scale

This feature provides the functionality for selecting range values in any numeric range format. You can show the range with linear or logarithmic intervals.

![Numeric Range Scale in WinUI 3 Range Slider](https://www.syncfusion.com/blogs/wp-content/uploads/2021/08/Numeric-Range-Scale-in-WinUI-3-Range-Slider.png)<figcaption>Numeric Range Scale in WinUI 3 Range Slider</figcaption>

## Axis labels

Labels allow you to add numeric content to the WinUI Range Slider to depict the values in the scale. You can easily customize the axis label styles and value formats. Render them for specific intervals and add prefixes and suffixes. You can also visualize data as text, like Low, Medium, and High.

Additionally, you can customize and differentiate the label styles for active and inactive parts in the Range Slider.

![Label Customization in WinUI 3 Range Slider](https://www.syncfusion.com/blogs/wp-content/uploads/2021/08/Label-Customization-in-WinUI-3-Range-Slider.png)<figcaption>Label Customization in WinUI 3 Range Slider</figcaption>

## Axis ticks

This feature allows you to set two types of tick lines in the Range Slider axis:

- Major ticks: Show the intervals clearly.
- Minor ticks: Show values between two intervals.

You can also customize the positions of tick marks.

![Major and Minor Ticks in WinUI 3 Range Slider](https://www.syncfusion.com/blogs/wp-content/uploads/2021/08/Major-and-Minor-Ticks-in-WinUI-3-Range-Slider.png)<figcaption>Major and Minor Ticks in WinUI 3 Range Slider</figcaption>

## Thumbs

This feature allows you to easily select a numeric range value by dragging (interacting with) both thumbs. The interactive overlay color will appear around the active thumb when dragging on it.  Customize the thumb shapes with built-in shapes such as circles, diamonds, ovals, rectangles, or a custom thumb. Add text or an icon inside the thumb using a data template.

You can also customize the thumb size, fill, stroke, pressed color, and hover fill colors using the built-in APIs.

![Custom Thumbs in WinUI 3 Range Slider](https://www.syncfusion.com/blogs/wp-content/uploads/2021/08/Custom-Thumbs-in-WinUI-3-Range-Slider.png)<figcaption>Custom Thumbs in WinUI 3 Range Slider</figcaption>

## Dividers

This feature allows you to render dividers in each interval to show the values intuitively. You can also easily customize the size, shape, and position of the dividers.

Additionally, you can customize and differentiate the style of the divider for active and inactive parts in the Range Slider.

![Custom Dividers in WinUI 3 Range Slider](https://www.syncfusion.com/blogs/wp-content/uploads/2021/08/Custom-Dividers-in-WinUI-3-Raneg-Slider.png)<figcaption>Custom Dividers in WinUI 3 Range Slider</figcaption>

## Vertical orientation

This feature allows you to display the Range Slider vertically. Also, you can modify the range order from bottom to top or top to bottom.

You can enjoy all the available features of the horizontal Range Slider in the vertical orientation.

![Vertical Orientation in WinUI 3 Range Slider](https://www.syncfusion.com/blogs/wp-content/uploads/2021/08/Vertical-Orientation-in-WinUI-3-Range-Slider.png)<figcaption>Vertical Orientation in WinUI 3 Range Slider</figcaption>

## Tooltip

This feature allows you to clearly indicate the current selection during an interaction. You can customize the format, styles, whole text, and visibility using the built-in APIs. You can also show tooltips on both thumbs, or only on the active thumb.

![Tooltips in WinUI 3 Range Slider](https://www.syncfusion.com/blogs/wp-content/uploads/2021/08/Tooltips-in-WinUI-3-Range-Slider.png)<figcaption>Tooltips in WinUI 3 Range Slider</figcaption>

## Discrete selection

This feature allows you to select only discrete numeric range values. The values are selected continuously by default. However, in some cases, you can limit the value selection to specific values as shown in the following .gif image.

![Discrete Selection in WinUI 3 Range Slider](https://www.syncfusion.com/blogs/wp-content/uploads/2021/08/Discrete-Selection-in-WinUI-3-Range-Slider.gif)<figcaption>Discrete Selection in WinUI 3 Range Slider</figcaption>

## Right-to-left (RTL) rendering

You can use this feature to arrange the axis scale values and move the thumb in the right-to-left direction. This is useful for users who work in RTL languages such as Hebrew and Arabic.

![Rendering WinUI 3 Range Slider in Right-to-Left Direction](https://www.syncfusion.com/blogs/wp-content/uploads/2021/08/Rendering-WinUI-3-Range-Slider-in-Right-to-Left-Direction.png)<figcaption>Rendering WinUI 3 Range Slider in Right-to-Left Direction</figcaption>

## Add the WinUI 3 Range Slider control to your application

So far, we have seen the marvelous features of the WinUI 3 Range Slider control. Let’s learn how to create a simple WinUI 3 application with the Range Slider control to demonstrate its basic usage.

### Step 1: Create a WinUI application

First, create a simple project using the instructions provided in the [Getting started with WinUI 3 apps](https://docs.microsoft.com/en-us/windows/apps/winui/winui3/create-your-first-winui3-app?tabs=desktop-csharp "Link to Create your first WinUI 3 app") documentation and follow the [Build apps with the Windows App SDK](https://docs.microsoft.com/en-us/windows/apps/windows-app-sdk/get-started "Link to the documentation to build apps with the Windows App SDK") documentation.

### Step 2: Install the necessary NuGet package

Then, install the latest [Syncfusion.Sliders.WinUI NuGet package](https://www.nuget.org/packages/Syncfusion.Sliders.WinUI "Link to the Syncfusion.Sliders.WinUI NuGet package") from [NuGet](https://www.nuget.org/ "Link to the NuGet Gallery") or from the installed location, **C:\Program Files (x86)\Syncfusion\Essential Studio\WinUI\xx.x.x.xx\NuGetPackages**.

**Note:** The **xx.x.x.xx** denotes the version of the Syncfusion Slider package.

### Step 3: Add the namespace and initialize the Range Slider

Import the control’s namespace **Syncfusion.UI.Xaml.Sliders** in the XAML file and initialize the Range Slider control ([SfRangeSlider](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Sliders.SfRangeSlider.html?tabs=tabid-1 "Documentation link to the Class SfRangeSlider")) as shown in the following code example.

```html
xmlns:slider="using:Syncfusion.UI.Xaml.Sliders"
...
<slider:SfRangeSlider />
```

### Step 4: Set range in the Range Slider

You can set the range value in the Range Slider using the [RangeStart](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Sliders.SfRangeSlider.html#Syncfusion_UI_Xaml_Sliders_SfRangeSlider_RangeStart "Link to the RangeStart property of WinUI RangeSlider") and [RangeEnd](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Sliders.SfRangeSlider.html#Syncfusion_UI_Xaml_Sliders_SfRangeSlider_RangeEnd "Link to the RangeEnd property of WinUI RangeSlider") properties. Specify the scale of the range using the [Minimum](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Sliders.SliderBase.html#Syncfusion_UI_Xaml_Sliders_SliderBase_Minimum "Link to the Minimum property of WinUI RangeSlider") and [Maximum](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Sliders.SliderBase.html#Syncfusion_UI_Xaml_Sliders_SliderBase_Maximum "Link to the Maximum property of WinUI RangeSlider") properties of the SfRangeSlider. The default value of the Minimum and Maximum properties are 0 and 100, respectively. So, the value of the start and end range properties should be within the default range.

Refer to the following example.

```html
<slider:SfRangeSlider RangeStart="30" RangeEnd="70" />
```

![Assigning Values to the WinUI 3 Range Slider](https://www.syncfusion.com/blogs/wp-content/uploads/2021/08/Assigning-Values-to-the-WinUI-3-Range-Slider.png)<figcaption>Assigning Values to the WinUI 3 Range Slider</figcaption>

### Step 5: Enable axis ticks and labels

You can enable ticks in the Range Slider using the [ShowTicks](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Sliders.SliderBase.html#Syncfusion_UI_Xaml_Sliders_SliderBase_ShowTicks "Link to the ShowTicks property of WinUI RangeSlider") property and labels using the [ShowLabels](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Sliders.SliderBase.html#Syncfusion_UI_Xaml_Sliders_SliderBase_ShowLabels "Link to the ShowLabels property of WinUI RangeSlider") property as in the following code.

```html
<slider:SfRangeSlider RangeStart="30" RangeEnd="70"
                          ShowTicks="True"
                          ShowLabels="True"
                          />
```

![Enabling Ticks in WinUI 3 Range Slider](https://www.syncfusion.com/blogs/wp-content/uploads/2021/08/Enabling-Ticks-in-WinUI-3-Range-Slider.png)<figcaption>Enabling Ticks in WinUI 3 Range Slider</figcaption>

## GitHub reference

For more information, refer to our [WinUI 3 Range Slider Getting Started demo project](https://github.com/SyncfusionExamples/WinUI_Sliders_Getting_Started/tree/main/RangeSliderGettingStartedDesktop/RangeSliderGettingStartedDesktop "Link to the WinUI Range Slider demo on GitHub").

## Conclusion

Thanks for reading! I hope you enjoyed learning about the Syncfusion [WinUI 3 Range Slider](https://www.syncfusion.com/winui-controls/range-slider "Link to WinUI 3 Range Slider") control and its features. For more details, refer to our [WinUI Range Slider user guide](https://help.syncfusion.com/winui/rangeslider/overview "Link to WinUI RangeSlider (Range Slider) Overview documentation") and  [GitHub demos](https://github.com/syncfusion/winui-demos/tree/master/sliders "Link to WinUI demos on GitHub"). Additionally, you can download and check out our [demo app in the App Center](https://install.appcenter.ms/orgs/syncfusion-demos/apps/winui-demos/distribution_groups/release "Link to the Syncfusion WinUI Demos on the App Center").

If you aren’t a customer yet, you can try our 30-day [free trial](https://www.syncfusion.com/downloads "Link to the free evaluation of the Syncfusion Essential Studio") to check out these features.

Also, if you need a specific feature in our WinUI Range Slider control, please let us know in the comments section below. You can also contact us through our [support forums](https://www.syncfusion.com/forums "Link to the Syncfusion support forum"), [Direct-Trac](https://www.syncfusion.com/support/directtrac/incidents "Link to the Syncfusion support system Direct Trac"), or [feedback portal](https://www.syncfusion.com/feedback/winui "Link to Syncfusion Feedback Portal"). We are always happy to assist you!

## Related blogs

- [API Improvements in WinUI 3 Charts: 2021 Volume 2](https://dev.to/sureshmohan/api-improvements-in-winui-3-charts-2021-volume-2-2h8l-temp-slug-7074914 "Link to API Improvements in WinUI 3 Charts: 2021 Volume 2 blog")
- [Everything You Need to Know About WinUI 3 Slider](https://dev.to/karthickramasamy08/everything-you-need-to-know-about-winui-3-slider-4386-temp-slug-5184636 "Link to Everything You Need to Know About WinUI 3 Slider blog")
- [Introducing the New WinUI NumberBox Control](https://dev.to/sureshmohan/introducing-the-new-winui-numberbox-control-2k8c-temp-slug-2572256 "Link to Introducing the New WinUI NumberBox Control blog")
- [What’s New in 2021 Volume 2: WinUI](https://dev.to/karthickramasamy08/what-s-new-in-2021-volume-2-winui-181a-temp-slug-5831882 "Link to What’s New in 2021 Volume 2: WinUI blog")