Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (143).NET Core  (23)Angular  (39)ASP.NET  (47)ASP.NET Core  (53)ASP.NET MVC  (83)Azure  (26)Blazor  (47)DocIO  (18)Essential JS 2  (64)Essential Studio  (159)Flutter  (52)JavaScript  (134)Microsoft  (96)PDF  (48)React  (29)Succinctly series  (118)Syncfusion  (399)TypeScript  (30)Uno Platform  (2)UWP  (4)Vue  (25)Webinar  (14)Windows Forms  (52)WPF  (92)Xamarin  (105)XlsIO  (20)Other CategoriesBarcode  (4)BI  (29)Bold BI  (3)Build conference  (6)Business intelligence  (53)Button  (4)C#  (99)Chart  (40)Cloud  (8)Company  (445)Dashboard  (4)Data Science  (3)Data Validation  (2)DataGrid  (31)Development  (233)Doc  (7)eBook  (89)Enterprise  (22)Entity Framework  (5)Essential Tools  (14)Excel  (13)Extensions  (7)File Manager  (3)Gantt  (6)Gauge  (4)Git  (3)Grid  (24)HTML  (8)Installer  (1)Knockout  (2)LINQPad  (1)Linux  (1)M-Commerce  (1)Metro Studio  (11)Mobile  (139)Mobile MVC  (9)OLAP server  (1)Orubase  (12)Partners  (20)PDF viewer  (15)Performance  (2)PHP  (1)PivotGrid  (4)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (5)Road Map  (9)Scheduler  (15)SfDataGrid  (7)Silverlight  (21)Sneak Peek  (12)Solution Services  (2)Spreadsheet  (2)SQL  (4)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (9)Tips and Tricks  (15)UI  (62)Uncategorized  (68)Unix  (2)User interface  (48)Visual State Manager  (1)Visual Studio  (12)Visual Studio Code  (7)Web  (96)What's new  (61)Windows 8  (19)Windows App  (1)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
Share on twitter
Share on facebook
Share on linkedin
WPF Range Slider : A Complete Walkthrough

WPF Range Slider: A Complete Walkthrough

The WPF Range Slider is a lightweight but highly interactive UI component. It allows users to select a range of values or a single value.

With the Essential Studio 2020 Volume 3 release, you can now customize each element in the control, and also display major and minor ticks in it.

The following key features are available in the WPF Range Slider component:

Let’s now have a quick look at them!

Ticks

This feature allows you to set values for the major and minor ticks that can be positioned at the top, bottom, inside, or outside of the track bar based on the TickPlacement property. Major ticks can be used to show major intervals and minor ticks can be used to show the in-between intervals.

Refer to the following code example.

<StackPanel Margin="10" VerticalAlignment="Center">
  <syncfusion:SfRangeSlider TickFrequency="10" MinorTickFrequency="3" TickPlacement="Outside"/>
</StackPanel>
Ticks in Range Slider
Ticks in Range Slider

Range selection

As one would expect, the Range Slider can be used as a slider to pick a value or to select a range between the minimum and maximum values defined. The colors in the control can be easily customized to differentiate the selected and not-selected parts of the slider.

Refer to the following code example.

<StackPanel Margin="10" VerticalAlignment="Center">
  <syncfusion:SfRangeSlider RangeStart="20" RangeEnd="80" ShowRange="True" />
</StackPanel>
Range Selection in Range Slider
Range Selection in Range Slider

Labels

This feature allows you to easily customize labels that denote the values of the intervals.

By default, labels are shown with the numeric values for the intervals.

You can customize the label format, render specific intervals, and add prefixes and suffixes to labels. You can also visualize values as text, such as low, medium, and high.

Refer to the following code example.

<StackPanel Margin="10" VerticalAlignment="Center">
  <syncfusion:SfRangeSlider CustomLabels="{Binding CustomCollection}" ShowValueLabels="True"  ShowCustomLabels="True" LabelPlacement="TopLeft"/>
</StackPanel>
Labels in Range Slider
Labels in Range Slider

Tooltips

The tooltip feature allows you to clearly indicate the current value of the Range Slider while the user interacts with it. Tooltips are shown for both thumbs in the range selection mode. The color, and formats of the tooltip text can be customized.

Refer to the following code example.

<StackPanel Margin="10" VerticalAlignment="Center">
  <syncfusion:SfRangeSlider ToolTipFormat="C0" ToolTipStyle="{StaticResource ToolTipStyle}" />
</StackPanel>
Tooltips in Range Slider
Tooltips in Range Slider

Customization

Each element in the Range Slider can be customized using the associated properties, and custom styles can also be applied to them. In the following image, we have customized the track bar, tooltips, thumb shapes, ticks, and labels.

Active track style

<Style x:Key="ActiveTrackStyle" TargetType="Rectangle">
    <Setter Property="Height" Value="5" />
    <Setter Property="Fill" Value="#0074e3" />
 </Style>

Inactive track style

<Style x:Key="InactiveTrackStyle" TargetType="Rectangle">
    <Setter Property="Height" Value="2" />
    <Setter Property="Fill" Value="#B5D0FF" />
    <Setter Property="RadiusX" Value="2" />
    <Setter Property="RadiusY" Value="2" />
</Style>

Thumb style

<Style x:Key="CircleThumbStyle" TargetType="Thumb">
    <Setter Property="Background" Value="#0074e3" />
    <Setter Property="BorderBrush" Value="#0074e3" />
    <Setter Property="Template">
       <Setter.Value>
          <ControlTemplate TargetType="Thumb">
             <Border Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" Background="{TemplateBinding Background}" CornerRadius="12" />
          </ControlTemplate>
       </Setter.Value>
   </Setter>
</Style>

Tooltip style

<Style x:Key="TooltipStyle" TargetType="ToolTip">
    <Setter Property="Background" Value="#1B7AE0" />
    <Setter Property="Foreground" Value="#ffffff" />
    <Setter Property="Template">
       <Setter.Value>
          <ControlTemplate TargetType="ContentControl">
              <Grid>
                 <Path Width="40" Height="30" Margin="0,1,0,0" HorizontalAlignment="Center" VerticalAlignment="Center" …. />
                 <TextBlock Text="{TemplateBinding Content}" />
              </Grid>
          </ControlTemplate>
      </Setter.Value>
    </Setter>
</Style>
Custom Styled Range Slider
Custom Styled Range Slider

Conclusion

In this blog, we showcased the key features in our WPF Range Slider control. The new customization and major and minor ticks features are available in our Essential Studio 2020 Volume 3 release. Refer to our documentation for more details about the control.

If you are not yet a Syncfusion customer, you can try our 30-day free trial to check out the available features.

If you wish to send us feedback or would like to submit any questions, please feel free to post them in the comments section of this blog post. You can also contact us through our support forumsfeedback portal, or Direct-Trac support system. We are always happy to assist you!

Tags:

Share this post:

Share on twitter
Share on facebook
Share on linkedin

Leave a comment

Popular Now

Be the first to get updates

Subscribe RSS feed
Scroll To Top