Styling and Appearance in WPF Range Slider (SfRangeSlider)
6 Feb 202524 minutes to read
SfRangeSlider makes it possible to change the appearance by providing certain properties.
InactiveTrackStyle
Modify the appearance of the inactive track using the InactiveTrackStyle property.
<Grid> <Grid.Resources> <ResourceDictionary> <Style x:Key="InactiveTrackStyle" TargetType="Rectangle"> <Setter Property="Height" Value="3" /> <Setter Property="Fill" Value="#a8a8a8" /> <Setter Property="RadiusX" Value="2" /> <Setter Property="RadiusY" Value="2" /> </Style> </ResourceDictionary> </Grid.Resources> <editors:SfRangeSlider Width="300" InactiveTrackStyle="{StaticResource InactiveTrackStyle}" Maximum="100" Minimum="0" /> </Grid>Grid parentGrid = new Grid(); Style inactiveTrackStyle = new Style(typeof(Rectangle)); inactiveTrackStyle.Setters.Add(new Setter(Rectangle.FillProperty, new SolidColorBrush((Color)ColorConverter.ConvertFromString("#a8a8a8")))); inactiveTrackStyle.Setters.Add(new Setter(Rectangle.HeightProperty, (double)3)); inactiveTrackStyle.Setters.Add(new Setter(Rectangle.RadiusXProperty, (double)2)); inactiveTrackStyle.Setters.Add(new Setter(Rectangle.RadiusYProperty, (double)2)); Resources.Add("inactiveTrackStyle", inactiveTrackStyle); SfRangeSlider rangeSlider = new SfRangeSlider() { Width = 300, Minimum = 0, Maximum = 100, InactiveTrackStyle = inactiveTrackStyle }; parentGrid.Children.Add(rangeSlider); this.Content = parentGrid;
ActiveTrackStyle
Modify the appearance of the active track by using the ActiveTrackStyle property.
<Grid> <Grid.Resources> <ResourceDictionary> <Style x:Key="InactiveTrackStyle" TargetType="Rectangle"> <Setter Property="Height" Value="3" /> <Setter Property="Fill" Value="#a8a8a8" /> <Setter Property="RadiusX" Value="2" /> <Setter Property="RadiusY" Value="2" /> </Style> <Style x:Key="ActiveTrackStyle" TargetType="Rectangle"> <Setter Property="Height" Value="3" /> <Setter Property="Fill" Value="#505050" /> </Style> </ResourceDictionary> </Grid.Resources> <editors:SfRangeSlider Width="300" ActiveTrackStyle="{StaticResource ActiveTrackStyle}" InactiveTrackStyle="{StaticResource InactiveTrackStyle}" Maximum="100" Minimum="0" RangeEnd="60" RangeStart="20" ShowRange="True" /> </Grid>Grid parentGrid = new Grid(); Style inactiveTrackStyle = new Style(typeof(Rectangle)); inactiveTrackStyle.Setters.Add(new Setter(Rectangle.FillProperty, new SolidColorBrush((Color)ColorConverter.ConvertFromString("#a8a8a8")))); inactiveTrackStyle.Setters.Add(new Setter(Rectangle.HeightProperty, (double)3)); inactiveTrackStyle.Setters.Add(new Setter(Rectangle.RadiusXProperty, (double)2)); inactiveTrackStyle.Setters.Add(new Setter(Rectangle.RadiusYProperty, (double)2)); Resources.Add("inactiveTrackStyle", inactiveTrackStyle); Style activeTrackStyle = new Style(typeof(Rectangle)); activeTrackStyle.Setters.Add(new Setter(Rectangle.FillProperty, new SolidColorBrush((Color)ColorConverter.ConvertFromString("#505050")))); activeTrackStyle.Setters.Add(new Setter(Rectangle.HeightProperty, (double)3)); Resources.Add("activeTrackStyle", activeTrackStyle); SfRangeSlider rangeSlider = new SfRangeSlider() { Width = 300, Minimum = 0, Maximum = 100, ShowRange = true, RangeStart = 20, RangeEnd = 60, ActiveTrackStyle = activeTrackStyle, InactiveTrackStyle = inactiveTrackStyle }; parentGrid.Children.Add(rangeSlider); this.Content = parentGrid;
ThumbStyle
Modify the appearance of the thumb by using the ThumbStyle property.
<Grid> <Grid.Resources> <ResourceDictionary> <Style x:Key="InactiveTrackStyle" TargetType="Rectangle"> <Setter Property="Height" Value="3" /> <Setter Property="Fill" Value="#a8a8a8" /> <Setter Property="RadiusX" Value="2" /> <Setter Property="RadiusY" Value="2" /> </Style> <Style x:Key="ActiveTrackStyle" TargetType="Rectangle"> <Setter Property="Height" Value="3" /> <Setter Property="Fill" Value="#505050" /> </Style> <Style x:Key="ThumbStyle" TargetType="Thumb"> <Setter Property="Width" Value="13" /> <Setter Property="Height" Value="13" /> <Setter Property="Background" Value="#0095ff" /> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="Thumb"> <Border x:Name="ThumbBorder" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" CornerRadius="12" /> </ControlTemplate> </Setter.Value> </Setter> </Style> </ResourceDictionary> </Grid.Resources> <editors:SfRangeSlider Width="300" ActiveTrackStyle="{StaticResource ActiveTrackStyle}" InactiveTrackStyle="{StaticResource InactiveTrackStyle}" Maximum="100" Minimum="0" RangeEnd="60" RangeStart="20" ShowRange="True" ThumbStyle="{StaticResource ThumbStyle}" /> </Grid>Grid parentGrid = new Grid(); Style inactiveTrackStyle = new Style(typeof(Rectangle)); inactiveTrackStyle.Setters.Add(new Setter(Rectangle.FillProperty, new SolidColorBrush((Color)ColorConverter.ConvertFromString("#a8a8a8")))); inactiveTrackStyle.Setters.Add(new Setter(Rectangle.HeightProperty, (double)3)); inactiveTrackStyle.Setters.Add(new Setter(Rectangle.RadiusXProperty, (double)2)); inactiveTrackStyle.Setters.Add(new Setter(Rectangle.RadiusYProperty, (double)2)); Resources.Add("inactiveTrackStyle", inactiveTrackStyle); Style activeTrackStyle = new Style(typeof(Rectangle)); activeTrackStyle.Setters.Add(new Setter(Rectangle.FillProperty, new SolidColorBrush((Color)ColorConverter.ConvertFromString("#505050")))); activeTrackStyle.Setters.Add(new Setter(Rectangle.HeightProperty, (double)3)); Resources.Add("activeTrackStyle", activeTrackStyle); ControlTemplate template = new ControlTemplate(typeof(Thumb)); FrameworkElementFactory elemFactory = new FrameworkElementFactory(typeof(Border)); elemFactory.Name = "Border"; elemFactory.SetValue(Border.CornerRadiusProperty, new CornerRadius(12)); elemFactory.SetValue(Border.BackgroundProperty, new SolidColorBrush((Color)ColorConverter.ConvertFromString("#0095ff"))); elemFactory.SetValue(Border.BorderBrushProperty, new SolidColorBrush((Color)ColorConverter.ConvertFromString("#0095ff"))); template.VisualTree = elemFactory; Style thumbStyle = new Style(typeof(Thumb)); thumbStyle.Setters.Add(new Setter(Thumb.BackgroundProperty, new SolidColorBrush((Color)ColorConverter.ConvertFromString("#0095ff")))); thumbStyle.Setters.Add(new Setter(Thumb.HeightProperty, (double)13)); thumbStyle.Setters.Add(new Setter(Thumb.WidthProperty, (double)13)); thumbStyle.Setters.Add(new Setter(Thumb.TemplateProperty, template)); Resources.Add("thumbStyle", thumbStyle); SfRangeSlider rangeSlider = new SfRangeSlider() { Width = 300, Minimum = 0, Maximum = 100, ShowRange = true, RangeStart = 20, RangeEnd = 60, ActiveTrackStyle = activeTrackStyle, InactiveTrackStyle = inactiveTrackStyle, ThumbStyle = thumbStyle }; parentGrid.Children.Add(rangeSlider); this.Content = parentGrid;
Tick Customization
Modify the appearance of the ticks by using the following properties:
- TickStroke
- ActiveTickStroke
- TickLength
- TickStrokeThickness
- MinorTickStroke
- ActiveMinorTickStroke
- MinorTickLength
- MinorTickStrokeThickness
TickStroke
Use the TickStroke property, to change the color of major ticks.
<editors:SfRangeSlider Width="300" Maximum="100" Minimum="0" RangeEnd="60" RangeStart="20" ShowRange="True" TickFrequency="10" TickPlacement="BottomRight" TickStroke="#FF0000" /> </Grid>Grid parentGrid = new Grid(); SfRangeSlider rangeSlider = new SfRangeSlider() { Width = 300, Maximum = 100, Minimum = 0, RangeEnd = 60, RangeStart = 20, ShowRange = true, TickFrequency = 10, TickPlacement = Syncfusion.Windows.Controls.Input.TickPlacement.BottomRight, TickStroke = new SolidColorBrush((Color)ColorConverter.ConvertFromString("#FF0000")) }; parentGrid.Children.Add(rangeSlider); this.Content = parentGrid;
ActiveTickStroke
Use the ActiveTickStroke property, to change the active major ticks color.
<editors:SfRangeSlider Width="300" Maximum="100" Minimum="0" RangeEnd="60" RangeStart="20" ShowRange="True" TickFrequency="10" TickPlacement="BottomRight" TickStroke="#FF0000" ActiveTickStroke="#02C9F3"/> </Grid>Grid parentGrid = new Grid(); SfRangeSlider rangeSlider = new SfRangeSlider() { Width = 300, Maximum = 100, Minimum = 0, RangeEnd = 60, RangeStart = 20, ShowRange = true, TickFrequency = 10, TickPlacement = Syncfusion.Windows.Controls.Input.TickPlacement.BottomRight, TickStroke = new SolidColorBrush((Color)ColorConverter.ConvertFromString("#FF0000")), ActiveTickStroke = new SolidColorBrush((Color)ColorConverter.ConvertFromString("#02C9F3")) }; parentGrid.Children.Add(rangeSlider); this.Content = parentGrid;
TickLength
Use the TickLength property, to change the height of the major ticks.
<Grid> <editors:SfRangeSlider Width="300" Maximum="100" Minimum="0" RangeEnd="60" RangeStart="20" ShowRange="True" TickLength="8" TickFrequency="10" TickPlacement="BottomRight" TickStroke="#FF0000" /> </Grid>Grid parentGrid = new Grid(); SfRangeSlider rangeSlider = new SfRangeSlider() { Width = 300, Maximum = 100, Minimum = 0, RangeEnd = 60, RangeStart = 20, ShowRange = true, TickFrequency = 10, TickLength = 8, TickPlacement = Syncfusion.Windows.Controls.Input.TickPlacement.BottomRight, TickStroke = new SolidColorBrush((Color)ColorConverter.ConvertFromString("#FF0000")) }; parentGrid.Children.Add(rangeSlider); this.Content = parentGrid;
TickStrokeThickness
Use the TickStrokeThickness property, to change the thickness of the major ticks.
<Grid> <editors:SfRangeSlider Width="300" Maximum="100" Minimum="0" RangeEnd="60" RangeStart="20" ShowRange="True" TickFrequency="10" TickLength="8" TickPlacement="BottomRight" TickStroke="#FF0000" TickStrokeThickness="2" /> </Grid>Grid parentGrid = new Grid(); SfRangeSlider rangeSlider = new SfRangeSlider() { Width = 300, Maximum = 100, Minimum = 0, RangeEnd = 60, RangeStart = 20, ShowRange = true, TickFrequency = 10, TickLength = 8, TickStrokeThickness = 2, TickPlacement = Syncfusion.Windows.Controls.Input.TickPlacement.BottomRight, TickStroke = new SolidColorBrush((Color)ColorConverter.ConvertFromString("#FF0000")) }; parentGrid.Children.Add(rangeSlider); this.Content = parentGrid;
MinorTickStroke
Use the MinorTickStroke property, to change the minor ticks color.
<editors:SfRangeSlider Width="300" Maximum="100" Minimum="0" RangeEnd="60" RangeStart="20" ShowRange="True" TickFrequency="10" MinorTickFrequency="3" TickPlacement="BottomRight" MinorTickStroke ="#FF0000" /> </Grid>Grid parentGrid = new Grid(); SfRangeSlider rangeSlider = new SfRangeSlider() { Width = 300, Maximum = 100, Minimum = 0, RangeEnd = 60, RangeStart = 20, ShowRange = true, TickFrequency = 10, MinorTickFrequency=3, TickPlacement = Syncfusion.Windows.Controls.Input.TickPlacement.BottomRight, MinorTickStroke = new SolidColorBrush((Color)ColorConverter.ConvertFromString("#FF0000")) }; parentGrid.Children.Add(rangeSlider); this.Content = parentGrid;
ActiveMinorTickStroke
Use the ActiveMinorTickStroke property, to change the color of the active minor ticks.
<editors:SfRangeSlider Width="300" Maximum="100" Minimum="0" RangeEnd="60" RangeStart="20" ShowRange="True" TickFrequency="10" MinorTickFrequency="3" TickPlacement="BottomRight" ActiveMinorTickStroke ="#FF0000" /> </Grid>Grid parentGrid = new Grid(); SfRangeSlider rangeSlider = new SfRangeSlider() { Width = 300, Maximum = 100, Minimum = 0, RangeEnd = 60, RangeStart = 20, ShowRange = true, TickFrequency = 10, MinorTickFrequency=3, TickPlacement = Syncfusion.Windows.Controls.Input.TickPlacement.BottomRight, ActiveMinorTickStroke = new SolidColorBrush((Color)ColorConverter.ConvertFromString("#FF0000")) }; parentGrid.Children.Add(rangeSlider); this.Content = parentGrid;
MinorTickLength
Use the MinorTickLength property, to change the height of the minor ticks.
<Grid> <editors:SfRangeSlider Width="300" Maximum="100" Minimum="0" RangeEnd="60" RangeStart="20" ShowRange="True" MinorTickLength ="6" TickLength ="10" TickFrequency="10" MinorTickFrequency="2" TickPlacement="BottomRight" /> </Grid>Grid parentGrid = new Grid(); SfRangeSlider rangeSlider = new SfRangeSlider() { Width = 300, Maximum = 100, Minimum = 0, RangeEnd = 60, RangeStart = 20, ShowRange = true, MinorTickLength = 6, TickLength = 10, TickFrequency= 10, MinorTickFrequency= 2, TickPlacement = Syncfusion.Windows.Controls.Input.TickPlacement.BottomRight }; parentGrid.Children.Add(rangeSlider); this.Content = parentGrid;
MinorTickStrokeThickness
Use the MinorTickStrokeThickness property, to change the thickness of the minor ticks.
<Grid> <editors:SfRangeSlider Width="300" Maximum="100" Minimum="0" RangeEnd="60" RangeStart="20" ShowRange="True" TickFrequency="10" MinorTickFrequency="2" TickLength="8" MinorTickLength="5" TickPlacement="BottomRight" TickStroke="#FF0000" MinorTickStroke="#FF0000" ActiveTickStroke="#02C9F3" ActiveMinorTickStroke="#02C9F3" MinorTickStrokeThickness ="2" /> </Grid>Grid parentGrid = new Grid(); SfRangeSlider rangeSlider = new SfRangeSlider() { Width = 300, Maximum = 100, Minimum = 0, RangeEnd = 60, RangeStart = 20, ShowRange = true, TickFrequency = 10, MinorTickFrequency= 2, TickLength = 8, MinorTickStrokeThickness = 2, MinorTickLength= 5, TickPlacement = Syncfusion.Windows.Controls.Input.TickPlacement.BottomRight, TickStroke = new SolidColorBrush((Color)ColorConverter.ConvertFromString("#FF0000")) MinorTickStroke = new SolidColorBrush((Color)ColorConverter.ConvertFromString("#FF0000")) ActiveMinorTickStroke = new SolidColorBrush((Color)ColorConverter.ConvertFromString("#02C9F3")) ActiveTickStroke = new SolidColorBrush((Color)ColorConverter.ConvertFromString("#02C9F3")) }; parentGrid.Children.Add(rangeSlider); this.Content = parentGrid;
Value label customization
Customize the value label using the TickBarItem style.
<Grid> <Grid.Resources> <ResourceDictionary> <Style TargetType="editors:TickBarItem"> <Setter Property="FontSize" Value="12" /> <Setter Property="Foreground" Value="Red" /> </Style> </ResourceDictionary> </Grid.Resources> <editors:SfRangeSlider Width="300" Maximum="100" Minimum="0" RangeEnd="60" RangeStart="20" ShowRange="True" ShowValueLabels="True" TickFrequency="10" TickLength="4" TickPlacement="BottomRight" TickStroke="#505050" TickStrokeThickness="1" /> </Grid>Grid parentGrid = new Grid(); SfRangeSlider rangeSlider = new SfRangeSlider() { Width = 300, Maximum = 100, Minimum = 0, RangeEnd = 60, ShowValueLabels = true, RangeStart = 20, ShowRange = true, TickFrequency = 10, TickLength = 4, TickStrokeThickness = 1, TickPlacement = Syncfusion.Windows.Controls.Input.TickPlacement.BottomRight, TickStroke = new SolidColorBrush((Color)ColorConverter.ConvertFromString("#505050")) }; parentGrid.Children.Add(rangeSlider); this.Content = parentGrid;