DEV Community

Cover image for Everything You Need to Know About WinUI 3 Slider
Suresh Mohan for Syncfusion, Inc.

Posted on • Originally published at syncfusion.com on

Everything You Need to Know About WinUI 3 Slider

The WinUI 3 – Windows App SDK Slider control is a highly interactive UI control, allowing users to select a single value from a range of values. It provides rich features:

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

Numeric scale

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

Numeric scale in WinUI 3 Slider
Numeric scale in WinUI 3 Slider

Labels

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

Additionally, you can customize and differentiate the labels for active and inactive parts.

Label Customization in WinUI 3 Slider
Label Customization in WinUI 3 Slider

Ticks

This feature allows you to set two types of ticks in the WinUI 3 Slider axis:

  • Major ticks: Use this to show the intervals clearly.
  • Minor ticks: Help users choose values between two intervals easily.

You can also customize the positions of tick marks.

Major and Minor Ticks in WinUI 3 Slider
Major and Minor Ticks in WinUI 3 Slider

Thumb

This feature allows you to easily select a numeric value by dragging (interacting with) the thumb. 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 color based on your requirements using the built-in APIs.

Custom Thumbs in WinUI 3 Slider
Custom Thumbs in WinUI 3 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 dividers for active and inactive sections.

Dividers in WinUI 3 Slider
Dividers in WinUI 3 Slider

Vertical orientation

This feature allows you to display the Slider vertically. You can enjoy all the available features of the horizontal Slider in the vertical orientation, too.

Vertical Orientation in WinUI 3 Slider
Vertical Orientation in WinUI 3 Slider

Tooltip

This feature allows you to clearly indicate the current selection during the interaction. You can customize the format, styles, whole text, and visibility using the built-in APIs. You can also customize the position of the tooltip as above or below the track.

Tooltips in WinUI 3 Slider
Tooltips in WinUI 3 Slider

Discrete selection

This feature allows you to select only discrete numeric 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 Slider
Discrete Selection in WinUI 3 Slider

Right-to-left (RTL)

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

Rendering WinUI 3 Slider in Right-to-Left Direction
Rendering WinUI 3 Slider in Right-to-Left Direction

Add the WinUI 3 Slider control to your application

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

Step 1: Create a WinUI 3 application

First, create a simple project using the instructions provided in getting started with WinUI 3 apps 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 to the application from NuGet or from the installed location, C:\Program Files (x86)\Syncfusion\Essential Studio\WinUI\xx.x.x.xx\NuGetPackages.

Note: ** xx.x.x.xx** denotes the version of the Syncfusion WinUI 3 – Windows App SDK Slider package.

Step 3: Add the namespace and initialize the Slider

Import the control’s namespace Syncfusion.UI.Xaml.Sliders in the XAML file and initialize the Slider control as shown in the following code example.

xmlns:slider="using:Syncfusion.UI.Xaml.Sliders"
...
<slider:SfSlider />
Enter fullscreen mode Exit fullscreen mode

Step 4: Set value to the Slider

You can set the value in the Slider using the Value property. Specify the range of scale using the Minimum and Maximum properties. The default value of the Minimum and Maximum properties is 0 and 100, respectively. So, the Value property should be given within the default range.

<slider:SfSlider Value="50" />
Enter fullscreen mode Exit fullscreen mode

Assigning Values to the WinUI 3 Slider
Assigning Values to the WinUI 3 Slider

Step 5: Enable ticks and labels

You can enable ticks in the Slider using the ShowTicks property and labels using the ShowLabels property. Refer to the following code example.

<slider:SfSlider Value="50" ShowLabels="True" ShowTicks="True" />
Enter fullscreen mode Exit fullscreen mode

Enabling Ticks in WinUI 3 Slider
Enabling Ticks in WinUI 3 Slider

GitHub reference

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

Conclusion

Thanks for reading! I hope you enjoyed learning about the Syncfusion WinUI 3 – Windows SDK App Slider control and its features. For more details, refer to our WinUI 3 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.

If you need a specific feature in our WinUI Slider control, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!

Related blogs

Top comments (0)