syncfusion-winui-range-slider

用途

本技能用于在 WinUI 桌面应用中实现 Syncfusion 的 RangeSlider 控件（SfRangeSlider）。该控件是一个高交互性的 UI 组件，通过沿轨道移动两个滑块（双拇指），让用户从较大的数据集中选择一个较小的数值范围。

适用场景包括：

在 WinUI 应用中实现范围选择器或范围拾取器
允许用户用双滑块选择数值区间
创建价格区间筛选、日期范围选择器或数值范围选择器
添加带标签、刻度和工具提示的交互式滑块
自定义轨道、滑块或覆盖层外观
处理范围值变化与校验

主要能力

数值范围选择：在任意范围内选择数值
视觉元素：标签、刻度、分隔线，直观显示数值
自定义：对轨道、滑块、覆盖层进行丰富样式设置
工具提示：以可自定义格式显示所选值
事件：通过 RangeValueChanged 跟踪范围变化
响应式：平滑的滑块交互与视觉反馈

使用方式

安装 NuGet 包

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

添加命名空间

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

基本实现

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

代码后台

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;

常见模式

价格区间筛选：

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

自定义样式范围滑块：

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

值变化跟踪：

<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}");
}

关键属性

范围配置：

Minimum (double)：最小值（默认 0）
Maximum (double)：最大值（默认 100）
RangeStart (double)：所选范围的起始值
RangeEnd (double)：所选范围的结束值
Interval (double)：标签/刻度的步进间隔
StepFrequency (double)：值变化步长

视觉元素：

ShowLabels (bool)：在间隔点显示标签
ShowTicks (bool)：显示主刻度
ShowDividers (bool)：显示分隔线
ShowTooltip (bool)：在滑块上显示工具提示

自定义：

ActiveTrackHeight (double)：活动轨道高度
InactiveTrackHeight (double)：非活动轨道高度
ThumbHeight (double)：滑块高度
ThumbWidth (double)：滑块宽度
OverlayRadius (double)：滑块覆盖层半径

行为：

IsInversed (bool)：反转方向
MinorTicksPerInterval (int)：间隔之间的次刻度数
MaximumLabelsCount (int)：每 100 逻辑像素的最大标签数

文档导航

入门：references/getting-started.md（创建 WinUI 应用、安装 NuGet 包、基本初始化、设置 RangeStart 与 RangeEnd、完整示例）
基本配置：references/basic-features.md（最小/最大值、间隔配置、步进频率、值变化事件、方向、离散与连续模式）
标签：references/labels.md（ShowLabels、最大标签数、标签偏移与位置、格式自定义、自定义模板、样式）
刻度：references/ticks.md（主刻度 ShowTicks、次刻度 MinorTicksPerInterval、长度与偏移、位置、样式）
分隔线：references/dividers.md（ShowDividers、尺寸、样式、用例）
轨道自定义：references/track.md（活动/非活动轨道样式、高度与圆角、填充自定义）
滑块与覆盖层：references/thumb-and-overlay.md（滑块自定义、尺寸与图标、ThumbStyle、覆盖层样式、自定义模板）
工具提示：references/tooltip.md（ShowTooltip、格式与位置、自定义模板、样式）
高级范围处理：references/custom-range.md（RangeValueChanged 等事件、程序化更新值、范围校验、自定义范围场景）

适用场景

电商价格筛选：用 RangeSlider 按价格区间筛选产品，标签和工具提示显示货币值
日期范围选择器：为日历应用实现月份/年份范围选择，配合自定义标签格式
音视频时间轴选择：创建具有精确范围控制和视觉反馈的片段选择工具
数据筛选仪表盘：让用户按数值范围（年龄、数量、评分等）筛选数据集
设置与配置：为应用设置（音量范围、亮度范围等）提供直观的范围选择器

限制与排查

范围值不更新：确保 RangeStart 和 RangeEnd 在 Minimum 与 Maximum 之内；检查双向数据绑定是否正确配置；确认 RangeValueChanged 事件已连接。

标签不显示：设置 ShowLabels="True"；配置 Interval 属性以确定标签间距；若使用自动间隔，检查 MaximumLabelsCount。

刻度不可见：设置 ShowTicks="True"；确保已定义 Interval；必要时调整 TickOffset。

工具提示不出现：设置 ShowTooltip="True"；检查 TooltipPlacement 属性；确认工具提示模板有效。

资源

WinUI RangeSlider 文档
API 参考
GitHub 示例
NuGet 包

（注：资料未提供具体收费、价格、平台版本要求等信息。）

技能介绍

用途