Implementing WinUI RangeSlider (SfRangeSlider)

When to Use This Skill

• Implement a range selector or range picker in WinUI applications
• Allow users to select a value range with dual thumbs
• Create price range filters, date range pickers, or numeric range selectors
• Add interactive sliders with labels, ticks, and tooltips
• Customize track, thumb, or overlay appearance
• Handle range value changes and validation
• Work with the SfRangeSlider control in WinUI apps

WinUI RangeSlider Overview

• Numeric Range Selection: Select numeric values within any range
• Visual Elements: Labels, ticks, dividers for intuitive value display
• Customization: Extensive styling for track, thumbs, overlays
• Tooltips: Show selected values with customizable formatting
• Events: RangeValueChanged for range tracking
• Responsive: Smooth thumb interaction and visual feedback

Documentation and Navigation Guide

Getting Started

• Creating WinUI application
• Installing Syncfusion.Sliders.WinUI NuGet package
• Basic SfRangeSlider initialization
• Setting RangeStart and RangeEnd values
• Complete working example

Basic Configuration

• Minimum and Maximum values
• Interval configuration
• Step frequency
• Value change events
• Orientation (Horizontal/Vertical)
• Discrete vs continuous mode

Labels

• Enabling labels (ShowLabels)
• Maximum labels count
• Label offset and placement
• Label format customization
• Custom label templates
• Label styling

Ticks

• Major ticks (ShowTicks)
• Minor ticks (MinorTicksPerInterval)
• Tick length and offset
• Tick placement
• Styling ticks

Dividers

• Enabling dividers (ShowDividers)
• Divider dimensions
• Divider styling
• Use cases

Track Customization

• Active track styling
• Inactive track styling
• Track height and corners
• Track fill customization

Thumb and Overlay

• Thumb customization
• Thumb size and icons
• ThumbStyle property
• Overlay styling
• Custom thumb templates

Tooltips

• Enabling tooltips (ShowTooltip)
• Tooltip format and placement
• Custom tooltip templates
• Tooltip styling

Advanced Range Handling

• RangeValueChanged and other events
• Programmatic value updates
• Range validation
• Custom range scenarios

Quick Start

1. Install NuGet Package

<PackageReference Include="Syncfusion.Sliders.WinUI" Version="Latest" />

2. Add Namespace

<Page xmlns:slider="using:Syncfusion.UI.Xaml.Sliders">

3. Basic Implementation

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

4. Code-Behind

using Syncfusion.UI.Xaml.Sliders;

SfRangeSlider rangeSlider = new SfRangeSlider();
rangeSlider.Minimum = 0;
rangeSlider.Maximum = 100;
rangeSlider.RangeStart = 30;
rangeSlider.RangeEnd = 70;
rangeSlider.ShowLabels = true;
rangeSlider.ShowTicks = true;
this.Content = rangeSlider;

Common Patterns

Price Range Filter

<slider:SfRangeSlider 
    Minimum="0"
    Maximum="1000"
    Interval="100"
    RangeStart="200"
    RangeEnd="800"
    ShowLabels="True"
    ShowTicks="True"
    ShowTooltip="True" />

Custom Styled Range Slider

<slider:SfRangeSlider 
    RangeStart="25"
    RangeEnd="75"
    ShowLabels="True"
    ShowTicks="True"
    ShowDividers="True"
    ActiveTrackHeight="4"
    InactiveTrackHeight="4"
    DividerHeight="4"
    DividerWidth="4"
    ThumbHeight="20"
    ThumbWidth="20" />

Value Change Tracking

<slider:SfRangeSlider 
    x:Name="rangeSlider"
    RangeStart="30"
    RangeEnd="70"
    RangeValueChanged="OnRangeChanged" />

private void OnRangeChanged(object sender, RangeValueChangedEventArgs e)
{
    double oldStart = e.RangeStartOldValue;
    double oldEnd = e.RangeEndOldValue;
    double newStart = e.RangeStartNewValue;
    double newEnd = e.RangeEndNewValue;
    
    // Update UI or perform validation
    Debug.WriteLine($"Range: {newStart} - {newEnd}");
}

Key Properties

Range Configuration

• Minimum

  (double): Minimum value (default: 0)

• Maximum

  (double): Maximum value (default: 100)

• RangeStart

  (double): Start value of selected range

• RangeEnd

  (double): End value of selected range

• Interval

  (double): Step interval for labels/ticks

• StepFrequency

  (double): Value change step size

Visual Elements

• ShowLabels

  (bool): Display labels on interval points

• ShowTicks

  (bool): Display major ticks

• ShowDividers

  (bool): Display dividers

• ShowTooltip

  (bool): Display tooltip on thumb

Customization

• ActiveTrackHeight

  (double): Height of active track

• InactiveTrackHeight

  (double): Height of inactive track

• ThumbHeight

  (double): Thumb height

• ThumbWidth

  (double): Thumb width

• OverlayRadius

  (double): Thumb overlay radius

Behavior

• IsInversed

  (bool): Reverse direction

• MinorTicksPerInterval

  (int): Minor ticks between intervals

• MaximumLabelsCount

  (int): Max labels per 100 logical pixels

Common Use Cases

E-Commerce Price Filters

Date Range Pickers

Audio/Video Timeline Selection

Data Filtering Dashboards

Settings and Configuration

Troubleshooting

• Ensure RangeStart and RangeEnd are within Minimum and Maximum
• Check if two-way data binding is configured correctly
• Verify RangeValueChanged event is wired up

• Set

  ShowLabels="True"

• Configure

  Interval

  property for label spacing
• Check

  MaximumLabelsCount

  if using automatic intervals

• Set

  ShowTicks="True"

• Ensure

  Interval

  is defined
• Adjust

  TickOffset

  if needed

• Set

  ShowTooltip="True"

• Check

  TooltipPlacement

  property
• Verify tooltip template is valid

Related Components

• Slider (SfSlider): Single-thumb slider for single value selection
• DateRangeSlider: Specialized slider for date range selection

Resources

• WinUI RangeSlider Documentation
• API Reference
• GitHub Examples
• NuGet Package