Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (150).NET Core  (25)Angular  (48)ASP.NET  (48)ASP.NET Core  (64)ASP.NET MVC  (86)Azure  (28)Blazor  (93)DocIO  (20)Essential JS 2  (70)Essential Studio  (162)File Formats  (18)Flutter  (103)JavaScript  (148)Microsoft  (101)PDF  (59)React  (33)Succinctly series  (122)Syncfusion  (474)TypeScript  (30)Uno Platform  (3)UWP  (4)Vue  (26)Webinar  (24)Windows Forms  (55)WinUI  (16)WPF  (119)Xamarin  (127)XlsIO  (24)Other CategoriesBarcode  (4)BI  (29)Bold BI  (3)Build conference  (6)Business intelligence  (53)Button  (4)C#  (107)Chart  (50)Cloud  (9)Company  (445)Dashboard  (6)Data Science  (3)Data Validation  (5)DataGrid  (45)Development  (252)Doc  (7)DockingManager  (1)eBook  (93)Enterprise  (22)Entity Framework  (5)Essential Tools  (14)Excel  (20)Extensions  (13)File Manager  (4)Gantt  (9)Gauge  (6)Git  (4)Grid  (27)HTML  (9)Installer  (2)Knockout  (2)LINQPad  (1)Linux  (2)M-Commerce  (1)Metro Studio  (11)Mobile  (215)Mobile MVC  (9)OLAP server  (1)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (22)Performance  (6)PHP  (1)PivotGrid  (4)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (5)Road Map  (9)Scheduler  (26)SfDataGrid  (9)Silverlight  (21)Sneak Peek  (19)Solution Services  (2)Spreadsheet  (9)SQL  (7)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (11)Tips and Tricks  (57)UI  (118)Uncategorized  (68)Unix  (2)User interface  (68)Visual State Manager  (1)Visual Studio  (19)Visual Studio Code  (10)Web  (206)What's new  (126)Windows 8  (19)Windows App  (1)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
Share on twitter
Share on facebook
Share on linkedin
Everything You Need to Know About the WinUI 3 Range Slider

Everything You Need to Know About the WinUI 3 Range Slider

The 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:

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
Numeric Range Scale in WinUI 3 Range Slider

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
Label Customization in WinUI 3 Range Slider

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
Major and Minor Ticks in WinUI 3 Range Slider

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
Custom Thumbs in WinUI 3 Range Slider

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
Custom Dividers in WinUI 3 Range Slider

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
Vertical Orientation in WinUI 3 Range Slider

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
Tooltips in WinUI 3 Range Slider

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
Discrete Selection in WinUI 3 Range Slider

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
Rendering WinUI 3 Range Slider in Right-to-Left Direction

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 documentation and follow the Build apps with the Windows App SDK documentation.

Step 2: Install the necessary NuGet package

Then, install the latest Syncfusion.Sliders.WinUI NuGet package from NuGet 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) as shown in the following code example.

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 and RangeEnd properties. Specify the scale of the range using the Minimum and Maximum 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.

<slider:SfRangeSlider RangeStart="30" RangeEnd="70" />
Assigning Values to the WinUI 3 Range Slider
Assigning Values to the WinUI 3 Range Slider

Step 5: Enable axis ticks and labels

You can enable ticks in the Range Slider using the ShowTicks property and labels using the ShowLabels property as in the following code.

<slider:SfRangeSlider RangeStart="30" RangeEnd="70"
                          ShowTicks="True"
                          ShowLabels="True"
                          />
Enabling Ticks in WinUI 3 Range Slider
Enabling Ticks in WinUI 3 Range Slider

GitHub reference

For more information, refer to our WinUI 3 Range Slider Getting Started demo project.

Conclusion

Thanks for reading! I hope you enjoyed learning about the Syncfusion WinUI 3 Range Slider control and its features. For more details, refer to our WinUI Range Slider user guide and  GitHub demos. Additionally, you can download and check out our demo app in the App Center.

If you aren’t a customer yet, you can try our 30-day free trial 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 forumsDirect-Trac, or feedback portal. We are always happy to assist you!

Related blogs

Tags:

Share this post:

Share on twitter
Share on facebook
Share on linkedin
Popular Now

Be the first to get updates

Subscribe RSS feed
Scroll To Top