syncfusion-wpf-range-slider

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Implementing Syncfusion WPF Range Slider

实现Syncfusion WPF Range Slider

The Syncfusion WPF Range Slider (SfRangeSlider) is a versatile control that allows users to select a value or range of values within a defined minimum and maximum limit. It supports dual thumb selection, tick marks, labels, tooltips, customization, touch/gesture support, and various orientation options.

Syncfusion WPF Range Slider（SfRangeSlider）是一个多功能控件，允许用户在设定的最小值和最大值范围内选择单个值或数值范围。它支持双滑块选择、刻度标记、标签、提示框、自定义设置、触摸/手势操作，以及多种布局方向选项。

When to Use This Skill

适用场景

Use this skill when users need to:

Implement a range slider control in WPF applications
Allow users to select a value range with dual thumbs
Create sliders with tick marks and snapping behavior
Display value labels or custom labels on sliders
Show tooltips with formatted values
Customize slider appearance (thumbs, tracks, ticks)
Handle range selection with validation (ThumbInterval)
Support touch and gesture-based interactions
Implement vertical or reversed-direction sliders
Respond to range value changes with

当用户需要以下功能时，可使用该控件：

在WPF应用中实现范围滑块控件
允许用户通过双滑块选择数值范围
创建带刻度标记和吸附行为的滑块
在滑块上显示数值标签或自定义标签
显示带格式化数值的提示框
自定义滑块外观（滑块、轨道、刻度）
通过ThumbInterval实现带验证的范围选择
支持触摸和基于手势的交互
实现垂直或反向方向的滑块
响应范围值变化

Component Overview

组件概述

The SfRangeSlider provides:

Single or Dual Thumb Selection - Select a single value or a range with two thumbs
Tick Marks - Major and minor ticks with snapping behavior
Custom Labels - Value labels and custom label support
Tooltips - Customizable tooltips showing current values
Orientation - Horizontal or vertical layout with direction reversal
Touch & Gestures - Full touch support and keyboard/mouse gestures
Customization - Complete styling control for all visual elements
Events - Range change notifications and label customization hooks

SfRangeSlider提供以下功能：

单/双滑块选择 - 选择单个值或使用双滑块选择范围
刻度标记 - 主刻度和次刻度，支持吸附行为
自定义标签 - 支持数值标签和自定义标签
提示框 - 可自定义的提示框，显示当前值
布局方向 - 水平或垂直布局，支持方向反转
触摸与手势 - 完整的触摸支持，以及键盘/鼠标手势
自定义设置 - 对所有视觉元素的完整样式控制
事件 - 范围变化通知和标签自定义钩子

Documentation and Navigation Guide

文档与导航指南

Getting Started

快速入门

📄 Read: references/getting-started.md

Package installation and setup
Basic range slider implementation
Setting minimum and maximum values
Initial range configuration
Theme and CSS integration

📄 阅读： references/getting-started.md

包安装与配置
基础范围滑块实现
设置最小值和最大值
初始范围配置
主题与CSS集成

Range Selection Features

范围选择功能

📄 Read: references/range-selection.md

RangeStart and RangeEnd properties
ShowRange property for dual thumb mode
AllowRangeDrag for dragging entire range
ThumbInterval for minimum thumb spacing
Single vs dual thumb selection modes
Range value data binding

📄 阅读： references/range-selection.md

RangeStart和RangeEnd属性
ShowRange属性（启用双滑块模式）
AllowRangeDrag（允许拖动整个范围）
ThumbInterval（滑块最小间距）
单滑块与双滑块选择模式
范围值数据绑定

Ticks and Snapping Behavior

刻度与吸附行为

📄 Read: references/ticks-and-snapping.md

TickFrequency and MinorTickFrequency
TickPlacement options (TopLeft, BottomRight, None)
SnapsTo behavior (Ticks, StepFrequency, None)
StepFrequency for incremental values
Tick visualization and customization
Snapping behavior examples

📄 阅读： references/ticks-and-snapping.md

TickFrequency和MinorTickFrequency
TickPlacement选项（TopLeft、BottomRight、None）
SnapsTo行为（Ticks、StepFrequency、None）
StepFrequency（增量值）
刻度可视化与自定义
吸附行为示例

Labels and Value Display

标签与数值显示

📄 Read: references/labels.md

ShowValueLabels and ShowCustomLabels
LabelPlacement options
LabelOrientation (horizontal/vertical)
ValuePlacement for value positioning
CustomLabels collection
LabelLoaded event for dynamic customization
Label formatting examples

📄 阅读： references/labels.md

ShowValueLabels和ShowCustomLabels
LabelPlacement选项
LabelOrientation（水平/垂直）
ValuePlacement（数值位置）
CustomLabels集合
LabelLoaded事件（动态自定义标签）
标签格式化示例

Tooltips and Value Display

提示框与数值显示

📄 Read: references/tooltips.md

ThumbToolTipPlacement (TopLeft, BottomRight, None)
ThumbToolTipPrecision for decimal places
ToolTipFormat for value formatting
ToolTipDisplayMode (Always, OnThumbMove, Never)
ToolTipStyle for custom appearance
Advanced tooltip customization

📄 阅读： references/tooltips.md

ThumbToolTipPlacement（TopLeft、BottomRight、None）
ThumbToolTipPrecision（提示框小数位数）
ToolTipFormat（提示框数值格式）
ToolTipDisplayMode（显示时机：Always、OnThumbMove、Never）
ToolTipStyle（自定义提示框外观）
高级提示框自定义

Intermediate Values

中间值

📄 Read: references/intermediate-values.md

IntermediateValue property
IntermediateRangeStart and IntermediateRangeEnd
Use cases for intermediate indicators
Visual representation examples

📄 阅读： references/intermediate-values.md

IntermediateValue属性
IntermediateRangeStart和IntermediateRangeEnd
中间指示器的使用场景
视觉表现示例

Customization and Styling

自定义与样式

📄 Read: references/customization.md

ThumbStyle customization
ActiveTrackStyle and InactiveTrackStyle
Tick styling (stroke, length, thickness)
Minor tick customization
Complete visual styling examples
Theme integration

📄 阅读： references/customization.md

ThumbStyle自定义
ActiveTrackStyle和InactiveTrackStyle
刻度样式（描边、长度、粗细）
次刻度自定义
完整视觉样式示例
主题集成

Orientation and Direction

布局方向

📄 Read: references/orientation-and-direction.md

Orientation property (Horizontal, Vertical)
IsDirectionReversed property
Visual behavior differences
Layout considerations
RTL support

📄 阅读： references/orientation-and-direction.md

Orientation属性（Horizontal、Vertical）
IsDirectionReversed属性
视觉行为差异
布局注意事项
RTL支持

Gestures and Interaction

手势与交互

📄 Read: references/gestures-and-interaction.md

MoveToPoint for tap/click navigation
Touch support capabilities
Keyboard gestures (arrow keys, page up/down, home/end)
Mouse gestures
Accessibility features

📄 阅读： references/gestures-and-interaction.md

MoveToPoint（点击/轻触导航）
触摸支持能力
键盘手势（方向键、PageUp/PageDown、Home/End）
鼠标手势
无障碍功能

Events and Event Handlers

事件与事件处理程序

📄 Read: references/events.md

RangeChanged event
RangeStartChanged event
RangeEndChanged event
LabelLoaded event
Event handler examples (XAML and C#)

📄 阅读： references/events.md

RangeChanged事件
RangeStartChanged事件
RangeEndChanged事件
LabelLoaded事件
事件处理程序示例（XAML和C#）

Quick Start Example

快速入门示例

Basic Range Slider

基础范围滑块

xaml

<Window x:Class="RangeSliderDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:editors="clr-namespace:Syncfusion.Windows.Controls.Input;assembly=Syncfusion.SfInput.Wpf">
    
    <Grid>
        <!-- Basic Range Slider -->
        <editors:SfRangeSlider
            Width="400"
            Minimum="0"
            Maximum="100"
            RangeStart="20"
            RangeEnd="80"
            ShowRange="True"
            TickPlacement="BottomRight"
            TickFrequency="10"
            ShowValueLabels="True" />
    </Grid>
</Window>

csharp

using Syncfusion.Windows.Controls.Input;
using System.Windows;

namespace RangeSliderDemo
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();

            // Create range slider programmatically
            SfRangeSlider rangeSlider = new SfRangeSlider()
            {
                Width = 400,
                Minimum = 0,
                Maximum = 100,
                RangeStart = 20,
                RangeEnd = 80,
                ShowRange = true,
                TickPlacement = TickPlacement.BottomRight,
                TickFrequency = 10,
                ShowValueLabels = true
            };

            // Add to container
            this.Content = rangeSlider;
        }
    }
}

xaml

<Window x:Class="RangeSliderDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:editors="clr-namespace:Syncfusion.Windows.Controls.Input;assembly=Syncfusion.SfInput.Wpf">
    
    <Grid>
        <!-- Basic Range Slider -->
        <editors:SfRangeSlider
            Width="400"
            Minimum="0"
            Maximum="100"
            RangeStart="20"
            RangeEnd="80"
            ShowRange="True"
            TickPlacement="BottomRight"
            TickFrequency="10"
            ShowValueLabels="True" />
    </Grid>
</Window>

csharp

using Syncfusion.Windows.Controls.Input;
using System.Windows;

namespace RangeSliderDemo
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();

            // Create range slider programmatically
            SfRangeSlider rangeSlider = new SfRangeSlider()
            {
                Width = 400,
                Minimum = 0,
                Maximum = 100,
                RangeStart = 20,
                RangeEnd = 80,
                ShowRange = true,
                TickPlacement = TickPlacement.BottomRight,
                TickFrequency = 10,
                ShowValueLabels = true
            };

            // Add to container
            this.Content = rangeSlider;
        }
    }
}

Common Patterns

常见模式

Pattern 1: Price Range Filter

模式1：价格范围筛选器

xaml

<!-- Price range selector with currency formatting -->
<editors:SfRangeSlider
    Width="350"
    Minimum="0"
    Maximum="1000"
    RangeStart="100"
    RangeEnd="500"
    ShowRange="True"
    TickFrequency="100"
    TickPlacement="BottomRight"
    ShowValueLabels="True"
    ToolTipFormat="C0"
    ThumbToolTipPlacement="TopLeft"
    SnapsTo="Ticks"
    RangeChanged="PriceRangeSlider_RangeChanged" />

xaml

<!-- Price range selector with currency formatting -->
<editors:SfRangeSlider
    Width="350"
    Minimum="0"
    Maximum="1000"
    RangeStart="100"
    RangeEnd="500"
    ShowRange="True"
    TickFrequency="100"
    TickPlacement="BottomRight"
    ShowValueLabels="True"
    ToolTipFormat="C0"
    ThumbToolTipPlacement="TopLeft"
    SnapsTo="Ticks"
    RangeChanged="PriceRangeSlider_RangeChanged" />

Pattern 2: Volume Control with Fine Adjustment

模式2：带精细调节的音量控制

xaml

<!-- Volume slider with minor ticks and snapping -->
<editors:SfRangeSlider
    Width="300"
    Minimum="0"
    Maximum="100"
    Value="50"
    TickFrequency="10"
    MinorTickFrequency="2"
    TickPlacement="BottomRight"
    SnapsTo="StepFrequency"
    StepFrequency="5"
    ShowValueLabels="True"
    ThumbToolTipPlacement="TopLeft"
    ToolTipFormat="N0" />

xaml

<!-- Volume slider with minor ticks and snapping -->
<editors:SfRangeSlider
    Width="300"
    Minimum="0"
    Maximum="100"
    Value="50"
    TickFrequency="10"
    MinorTickFrequency="2"
    TickPlacement="BottomRight"
    SnapsTo="StepFrequency"
    StepFrequency="5"
    ShowValueLabels="True"
    ThumbToolTipPlacement="TopLeft"
    ToolTipFormat="N0" />

Pattern 3: Date Range Selector

模式3：日期范围选择器

xaml

<!-- Custom labels for date ranges -->
<editors:SfRangeSlider
    Width="450"
    Minimum="0"
    Maximum="11"
    RangeStart="2"
    RangeEnd="8"
    ShowRange="True"
    ShowCustomLabels="True"
    TickFrequency="1"
    TickPlacement="BottomRight"
    SnapsTo="Ticks">
    <editors:SfRangeSlider.CustomLabels>
        <editors:LabelItem Content="Jan" Position="0"/>
        <editors:LabelItem Content="Feb" Position="1"/>
        <editors:LabelItem Content="Mar" Position="2"/>
        <editors:LabelItem Content="Apr" Position="3"/>
        <editors:LabelItem Content="May" Position="4"/>
        <editors:LabelItem Content="Jun" Position="5"/>
        <editors:LabelItem Content="Jul" Position="6"/>
        <editors:LabelItem Content="Aug" Position="7"/>
        <editors:LabelItem Content="Sep" Position="8"/>
        <editors:LabelItem Content="Oct" Position="9"/>
        <editors:LabelItem Content="Nov" Position="10"/>
        <editors:LabelItem Content="Dec" Position="11"/>
    </editors:SfRangeSlider.CustomLabels>
</editors:SfRangeSlider>

xaml

<!-- Custom labels for date ranges -->
<editors:SfRangeSlider
    Width="450"
    Minimum="0"
    Maximum="11"
    RangeStart="2"
    RangeEnd="8"
    ShowRange="True"
    ShowCustomLabels="True"
    TickFrequency="1"
    TickPlacement="BottomRight"
    SnapsTo="Ticks">
    <editors:SfRangeSlider.CustomLabels>
        <editors:LabelItem Content="Jan" Position="0"/>
        <editors:LabelItem Content="Feb" Position="1"/>
        <editors:LabelItem Content="Mar" Position="2"/>
        <editors:LabelItem Content="Apr" Position="3"/>
        <editors:LabelItem Content="May" Position="4"/>
        <editors:LabelItem Content="Jun" Position="5"/>
        <editors:LabelItem Content="Jul" Position="6"/>
        <editors:LabelItem Content="Aug" Position="7"/>
        <editors:LabelItem Content="Sep" Position="8"/>
        <editors:LabelItem Content="Oct" Position="9"/>
        <editors:LabelItem Content="Nov" Position="10"/>
        <editors:LabelItem Content="Dec" Position="11"/>
    </editors:SfRangeSlider.CustomLabels>
</editors:SfRangeSlider>

Pattern 4: Vertical Temperature Slider

模式4：垂直温度滑块

xaml

<!-- Vertical orientation with reversed direction -->
<editors:SfRangeSlider
    Height="300"
    Minimum="-10"
    Maximum="50"
    Value="22"
    Orientation="Vertical"
    TickFrequency="10"
    TickPlacement="TopLeft"
    ShowValueLabels="True"
    ThumbToolTipPlacement="TopLeft"
    ToolTipFormat="N0"
    IsDirectionReversed="False" />

xaml

<!-- Vertical orientation with reversed direction -->
<editors:SfRangeSlider
    Height="300"
    Minimum="-10"
    Maximum="50"
    Value="22"
    Orientation="Vertical"
    TickFrequency="10"
    TickPlacement="TopLeft"
    ShowValueLabels="True"
    ThumbToolTipPlacement="TopLeft"
    ToolTipFormat="N0"
    IsDirectionReversed="False" />

Pattern 5: Styled Range Slider with Custom Colors

模式5：自定义颜色的样式化范围滑块

xaml

<Window.Resources>
    <!-- Custom thumb style -->
    <Style x:Key="CustomThumbStyle" TargetType="Thumb">
        <Setter Property="Width" Value="20"/>
        <Setter Property="Height" Value="20"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Thumb">
                    <Ellipse Fill="#FF4CAF50" 
                             Stroke="#FF2E7D32" 
                             StrokeThickness="2"/>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>

<editors:SfRangeSlider
    Width="400"
    Minimum="0"
    Maximum="100"
    RangeStart="30"
    RangeEnd="70"
    ShowRange="True"
    ThumbStyle="{StaticResource CustomThumbStyle}"
    ActiveTickStroke="#FF4CAF50"
    TickStroke="#FFBDBDBD"
    TickPlacement="BottomRight"
    TickFrequency="10" />

xaml

<Window.Resources>
    <!-- Custom thumb style -->
    <Style x:Key="CustomThumbStyle" TargetType="Thumb">
        <Setter Property="Width" Value="20"/>
        <Setter Property="Height" Value="20"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Thumb">
                    <Ellipse Fill="#FF4CAF50" 
                             Stroke="#FF2E7D32" 
                             StrokeThickness="2"/>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>

<editors:SfRangeSlider
    Width="400"
    Minimum="0"
    Maximum="100"
    RangeStart="30"
    RangeEnd="70"
    ShowRange="True"
    ThumbStyle="{StaticResource CustomThumbStyle}"
    ActiveTickStroke="#FF4CAF50"
    TickStroke="#FFBDBDBD"
    TickPlacement="BottomRight"
    TickFrequency="10" />

Key Properties

关键属性

Range and Values

范围与数值

```
Minimum
```
- Minimum value of the slider (default: 0)
```
Maximum
```
- Maximum value of the slider (default: 100)
```
RangeStart
```
- Start value of the selected range
```
RangeEnd
```
- End value of the selected range
```
ShowRange
```
- Enable dual thumb mode for range selection
```
AllowRangeDrag
```
- Allow dragging the entire selected range
```
ThumbInterval
```
- Minimum spacing between thumbs

```
Minimum
```
- 滑块最小值（默认：0）
```
Maximum
```
- 滑块最大值（默认：100）
```
RangeStart
```
- 选中范围的起始值
```
RangeEnd
```
- 选中范围的结束值
```
ShowRange
```
- 启用双滑块范围选择模式
```
AllowRangeDrag
```
- 允许拖动整个选中范围
```
ThumbInterval
```
- 滑块之间的最小间距

Ticks

刻度

```
TickFrequency
```
- Interval between major ticks
```
MinorTickFrequency
```
- Interval between minor ticks
```
TickPlacement
```
- Position of ticks (TopLeft, BottomRight, None)
```
SnapsTo
```
- Snap behavior (Ticks, StepFrequency, None)
```
StepFrequency
```
- Increment value for snapping

```
TickFrequency
```
- 主刻度间隔
```
MinorTickFrequency
```
- 次刻度间隔
```
TickPlacement
```
- 刻度位置（TopLeft、BottomRight、None）
```
SnapsTo
```
- 吸附行为（Ticks、StepFrequency、None）
```
StepFrequency
```
- 吸附增量值

Labels

Tooltips

提示框

```
ThumbToolTipPlacement
```
- Tooltip position (TopLeft, BottomRight, None)
```
ThumbToolTipPrecision
```
- Decimal places in tooltip
```
ToolTipFormat
```
- Format string for tooltip values
```
ToolTipDisplayMode
```
- When to show tooltip (Always, OnThumbMove, Never)
```
ToolTipStyle
```
- Custom style for tooltips

```
ThumbToolTipPlacement
```
- 提示框位置（TopLeft、BottomRight、None）
```
ThumbToolTipPrecision
```
- 提示框小数位数
```
ToolTipFormat
```
- 提示框数值格式字符串
```
ToolTipDisplayMode
```
- 提示框显示时机（Always、OnThumbMove、Never）
```
ToolTipStyle
```
- 提示框自定义样式

Layout

布局

```
Orientation
```
- Horizontal or Vertical
```
IsDirectionReversed
```
- Reverse the direction of values

```
Orientation
```
- 水平或垂直布局
```
IsDirectionReversed
```
- 反转数值方向

Interaction

交互

```
MoveToPoint
```
- Move thumb to clicked/tapped position

```
MoveToPoint
```
- 将滑块移动到点击/轻触位置

Styling

样式

```
ThumbStyle
```
- Custom style for thumb controls
```
ActiveTrackStyle
```
- Style for active track region
```
InactiveTrackStyle
```
- Style for inactive track region
```
ActiveTickStroke
```
- Color for active ticks
```
TickStroke
```
- Color for ticks

```
ThumbStyle
```
- 滑块控件自定义样式
```
ActiveTrackStyle
```
- 激活轨道区域样式
```
InactiveTrackStyle
```
- 未激活轨道区域样式
```
ActiveTickStroke
```
- 激活刻度颜色
```
TickStroke
```
- 刻度颜色

Events

事件

RangeChanged

Triggered when RangeStart or RangeEnd values change. Provides old and new values for both start and end.

当RangeStart或RangeEnd值变化时触发，提供起始和结束值的新旧值。

RangeStartChanged

Triggered when RangeStart value changes. Provides old and new start values.

当RangeStart值变化时触发，提供起始值的新旧值。

RangeEndChanged

Triggered when RangeEnd value changes. Provides old and new end values.

当RangeEnd值变化时触发，提供结束值的新旧值。

LabelLoaded

Triggered when slider labels are created. Allows dynamic label content customization.

当滑块标签创建时触发，允许动态自定义标签内容。

Common Use Cases

常见使用场景

Price Range Filters - E-commerce product filtering with min/max price selection
Date Range Selection - Calendar or timeline range selection with custom labels
Volume/Brightness Controls - Media players or system settings
Temperature Controls - HVAC or scientific applications with vertical sliders
Data Filtering - Analytics dashboards for data range selection
Age Range Filters - Demographics or user profile filtering
Zoom Level Controls - Map or image zoom with precise increments
Budget Allocation - Financial applications with range constraints
Time Range Selection - Scheduling or timeline applications
Measurement Ranges - Scientific or industrial applications

价格范围筛选 - 电商产品筛选，支持最小/最大价格选择
日期范围选择 - 日历或时间轴范围选择，支持自定义标签
音量/亮度控制 - 媒体播放器或系统设置
温度控制 - HVAC或科学应用，支持垂直滑块
数据筛选 - 分析仪表板的数据范围选择
年龄范围筛选 - 人口统计或用户资料筛选
缩放级别控制 - 地图或图片缩放，支持精确增量
预算分配 - 财务应用，支持范围约束
时间范围选择 - 调度或时间轴应用
测量范围 - 科学或工业应用

Best Practices

最佳实践

Set appropriate TickFrequency - Match tick intervals to your data granularity
Use SnapsTo for discrete values - Enable snapping for better UX with discrete data
Format tooltips appropriately - Use ToolTipFormat to match your data type (currency, percentage, etc.)
Consider ThumbInterval - Prevent invalid ranges by setting minimum thumb spacing
Use CustomLabels for non-numeric data - Better UX for categorical or date-based ranges
Handle RangeChanged events - Update dependent UI or validate range selections
Choose appropriate orientation - Vertical sliders work well for height, temperature, volume
Style consistently - Match thumb and track colors to your application theme
Provide visual feedback - Use ShowRange and tooltips to show current selection
Consider accessibility - Ensure keyboard navigation and screen reader support

设置合适的TickFrequency - 刻度间隔与数据粒度匹配
对离散值使用SnapsTo - 为离散数据启用吸附，提升用户体验
合理格式化提示框 - 使用ToolTipFormat匹配数据类型（货币、百分比等）
考虑ThumbInterval - 设置滑块最小间距，避免无效范围
非数值数据使用CustomLabels - 为分类或日期范围提供更好的用户体验
处理RangeChanged事件 - 更新关联UI或验证范围选择
选择合适的布局方向 - 垂直滑块适用于高度、温度、音量等场景
保持样式一致 - 滑块和轨道颜色与应用主题匹配
提供视觉反馈 - 使用ShowRange和提示框显示当前选择
考虑无障碍性 - 确保键盘导航和屏幕阅读器支持

Related Components

Installation

安装

bash

undefined

bash

undefined

Install via NuGet Package Manager

Install-Package Syncfusion.SfInput.WPF

Or via .NET CLI

dotnet add package Syncfusion.SfInput.WPF


Add XML namespace in XAML:
```xaml
xmlns:editors="clr-namespace:Syncfusion.Windows.Controls.Input;assembly=Syncfusion.SfInput.Wpf"

dotnet add package Syncfusion.SfInput.WPF


在XAML中添加XML命名空间：
```xaml
xmlns:editors="clr-namespace:Syncfusion.Windows.Controls.Input;assembly=Syncfusion.SfInput.Wpf"

syncfusion-wpf-range-slider

Original

Translation

Implementing Syncfusion WPF Range Slider

实现Syncfusion WPF Range Slider

When to Use This Skill

适用场景

Component Overview

组件概述

Documentation and Navigation Guide

文档与导航指南

Getting Started

快速入门

Range Selection Features

范围选择功能

Ticks and Snapping Behavior

刻度与吸附行为

Labels and Value Display

标签与数值显示

Tooltips and Value Display

提示框与数值显示

Intermediate Values

中间值

Customization and Styling

自定义与样式

Orientation and Direction

布局方向

Gestures and Interaction

手势与交互

Events and Event Handlers

事件与事件处理程序

Quick Start Example

快速入门示例

Basic Range Slider

基础范围滑块

Common Patterns

常见模式

Pattern 1: Price Range Filter

模式1：价格范围筛选器

Pattern 2: Volume Control with Fine Adjustment

模式2：带精细调节的音量控制

Pattern 3: Date Range Selector

模式3：日期范围选择器

Pattern 4: Vertical Temperature Slider

模式4：垂直温度滑块

Pattern 5: Styled Range Slider with Custom Colors

模式5：自定义颜色的样式化范围滑块

Key Properties

关键属性

Range and Values

范围与数值

Ticks

刻度

Labels

标签

Tooltips

提示框

Layout

布局

Interaction

交互

Styling

样式

Events

事件

RangeChanged

RangeChanged

RangeStartChanged

RangeStartChanged

RangeEndChanged

RangeEndChanged

LabelLoaded

LabelLoaded

Common Use Cases

常见使用场景

Best Practices

最佳实践

Related Components

相关组件

Installation