syncfusion-winui-range-slider

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Implementing WinUI RangeSlider (SfRangeSlider)

实现WinUI RangeSlider（SfRangeSlider）

Complete guide for implementing the Syncfusion WinUI RangeSlider control - a highly interactive UI component for selecting numeric ranges with dual thumbs, labels, ticks, and rich customization options.

这是实现Syncfusion WinUI RangeSlider控件的完整指南，该控件是一款高交互性UI组件，支持通过双滑块、标签、刻度等能力实现数值范围选择，同时提供丰富的自定义选项。

When to Use This Skill

何时使用本技能

Use this skill when you need to:

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应用中实现范围选择器或范围拾取器
允许用户通过双滑块选择数值范围
构建价格范围筛选器、日期范围选择器或数值范围选择器
添加带标签、刻度和提示框的交互式滑块
自定义轨道、滑块或覆盖层的外观
处理范围数值变更和校验
在WinUI应用中使用SfRangeSlider控件

WinUI RangeSlider Overview

WinUI RangeSlider 概述

The Syncfusion WinUI RangeSlider (SfRangeSlider) is a highly interactive UI control that allows users to select a smaller range from a larger data set by moving dual thumbs along a track.

Key Features:

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

Syncfusion WinUI RangeSlider（SfRangeSlider）是一款高交互性UI控件，用户可通过沿轨道拖动双滑块，从更大的数据集中选择更小的数值范围。

核心特性：

数值范围选择：可选择任意范围内的数值
可视化元素：提供标签、刻度、分割线，实现直观的数值展示
自定义能力：支持对轨道、滑块、覆盖层进行丰富的样式设置
提示框：可展示选中的数值，支持自定义格式
事件：提供RangeValueChanged事件用于范围追踪
响应式：流畅的滑块交互和视觉反馈

Documentation and Navigation Guide

文档与导航指南

Getting Started

入门指南

📄 Read: references/getting-started.md

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

📄 阅读： references/getting-started.md

创建WinUI应用
安装Syncfusion.Sliders.WinUI NuGet包
基础SfRangeSlider初始化
设置RangeStart和RangeEnd数值
完整可运行示例

Basic Configuration

基础配置

📄 Read: references/basic-features.md

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

📄 阅读： references/basic-features.md

最小值和最大值设置
间隔配置
步长频率
数值变更事件
方向（水平/垂直）
离散模式与连续模式

Labels

Ticks

刻度

📄 Read: references/ticks.md

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

📄 阅读： references/ticks.md

主刻度（ShowTicks）
次刻度（MinorTicksPerInterval）
刻度长度和偏移
刻度位置
刻度样式设置

Dividers

分割线

📄 Read: references/dividers.md

Enabling dividers (ShowDividers)
Divider dimensions
Divider styling
Use cases

📄 阅读： references/dividers.md

启用分割线（ShowDividers）
分割线尺寸
分割线样式设置
适用场景

Track Customization

轨道自定义

📄 Read: references/track.md

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

📄 阅读： references/track.md

激活轨道样式设置
未激活轨道样式设置
轨道高度和圆角
轨道填充自定义

Thumb and Overlay

滑块与覆盖层

📄 Read: references/thumb-and-overlay.md

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

📄 阅读： references/thumb-and-overlay.md

滑块自定义
滑块尺寸和图标
ThumbStyle属性
覆盖层样式设置
自定义滑块模板

Tooltips

提示框

📄 Read: references/tooltip.md

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

📄 阅读： references/tooltip.md

启用提示框（ShowTooltip）
提示框格式和位置
自定义提示框模板
提示框样式设置

Advanced Range Handling

高级范围处理

📄 Read: references/custom-range.md

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

📄 阅读： references/custom-range.md

RangeValueChanged及其他事件
编程式更新数值
范围校验
自定义范围场景

Quick Start

快速开始

1. Install NuGet Package

1. 安装NuGet包

xml

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

xml

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

2. Add Namespace

2. 添加命名空间

xaml

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

xaml

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

3. Basic Implementation

3. 基础实现

xaml

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

xaml

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

4. Code-Behind

4. 后台代码实现

csharp

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;

csharp

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

价格范围筛选器

xaml

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

xaml

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

Custom Styled Range Slider

自定义样式范围滑块

xaml

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

xaml

<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

数值变更追踪

xaml

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

csharp

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

xaml

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

csharp

private void OnRangeChanged(object sender, RangeValueChangedEventArgs e)
{
    double oldStart = e.RangeStartOldValue;
    double oldEnd = e.RangeEndOldValue;
    double newStart = e.RangeStartNewValue;
    double newEnd = e.RangeEndNewValue;
    
    // 更新UI或执行校验
    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

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

Visual Elements

可视化元素

```
ShowLabels
```
(bool): Display labels on interval points
```
ShowTicks
```
(bool): Display major ticks
```
ShowDividers
```
(bool): Display dividers
```
ShowTooltip
```
(bool): Display tooltip on thumb

```
ShowLabels
```
（bool）：在间隔点展示标签
```
ShowTicks
```
（bool）：展示主刻度
```
ShowDividers
```
（bool）：展示分割线
```
ShowTooltip
```
（bool）：在滑块上展示提示框

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

```
ActiveTrackHeight
```
（double）：激活状态轨道的高度
```
InactiveTrackHeight
```
（double）：未激活状态轨道的高度
```
ThumbHeight
```
（double）：滑块高度
```
ThumbWidth
```
（double）：滑块宽度
```
OverlayRadius
```
（double）：滑块覆盖层圆角半径

Behavior

行为配置

```
IsInversed
```
(bool): Reverse direction
```
MinorTicksPerInterval
```
(int): Minor ticks between intervals
```
MaximumLabelsCount
```
(int): Max labels per 100 logical pixels

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

Common Use Cases

常见使用场景

E-Commerce Price Filters

电商价格筛选器

Use RangeSlider for filtering products by price range with labels and tooltips showing currency values.

使用RangeSlider实现按价格范围筛选商品，标签和提示框可展示货币数值。

Date Range Pickers

日期范围选择器

Implement month/year range selection with custom label formatting for calendar applications.

为日历应用实现月/年范围选择，支持自定义标签格式。

Audio/Video Timeline Selection

音视频时间线选择

Create clip selection tools with precise range control and visual feedback.

构建片段选择工具，提供精准的范围控制和视觉反馈。

Data Filtering Dashboards

数据筛选仪表盘

Enable users to filter datasets by numeric ranges (age, quantity, ratings, etc.).

支持用户按数值范围（年龄、数量、评分等）筛选数据集。

Settings and Configuration

设置与配置

Provide intuitive range selectors for app settings (volume range, brightness range, etc.).

为应用设置提供直观的范围选择器（音量范围、亮度范围等）。

Troubleshooting

问题排查

Range values not updating:

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

Labels not showing:

Set
```
ShowLabels="True"
```
Configure
```
Interval
```
property for label spacing
Check
```
MaximumLabelsCount
```
if using automatic intervals

Ticks not visible:

Set
```
ShowTicks="True"
```
Ensure
```
Interval
```
is defined
Adjust
```
TickOffset
```
if needed

Tooltip not appearing:

Set
```
ShowTooltip="True"
```
Check
```
TooltipPlacement
```
property
Verify tooltip template is valid

范围数值不更新：

确保RangeStart和RangeEnd在Minimum和Maximum范围内
检查双向数据绑定是否配置正确
确认RangeValueChanged事件已正确绑定

标签不展示：

设置
```
ShowLabels="True"
```
配置
```
Interval
```
属性设置标签间距
如果使用自动间隔，检查
```
MaximumLabelsCount
```
配置

刻度不可见：

设置
```
ShowTicks="True"
```
确保已定义
```
Interval
```
如有需要可调整
```
TickOffset
```

提示框不显示：

设置
```
ShowTooltip="True"
```
检查
```
TooltipPlacement
```
属性
确认提示框模板有效

syncfusion-winui-range-slider

Original

Translation

Implementing WinUI RangeSlider (SfRangeSlider)

实现WinUI RangeSlider（SfRangeSlider）

When to Use This Skill

何时使用本技能

WinUI RangeSlider Overview

WinUI RangeSlider 概述

Documentation and Navigation Guide

文档与导航指南

Getting Started

入门指南

Basic Configuration

基础配置

Labels

标签

Ticks

刻度

Dividers

分割线

Track Customization

轨道自定义

Thumb and Overlay

滑块与覆盖层

Tooltips

提示框

Advanced Range Handling

高级范围处理

Quick Start

快速开始

1. Install NuGet Package

1. 安装NuGet包

2. Add Namespace

2. 添加命名空间

3. Basic Implementation

3. 基础实现

4. Code-Behind

4. 后台代码实现

Common Patterns

常用模式

Price Range Filter

价格范围筛选器

Custom Styled Range Slider

自定义样式范围滑块

Value Change Tracking

数值变更追踪

Key Properties

核心属性

Range Configuration

范围配置

Visual Elements

可视化元素

Customization

自定义配置

Behavior

行为配置

Common Use Cases

常见使用场景

E-Commerce Price Filters

电商价格筛选器

Date Range Pickers

日期范围选择器

Audio/Video Timeline Selection

音视频时间线选择

Data Filtering Dashboards

数据筛选仪表盘

Settings and Configuration

设置与配置

Troubleshooting

问题排查

Related Components

相关组件

Resources

资源