How to stylize the SF Range Slider as per my requirements?

[Mark]

I'm trying to create this Range Slider design:

However, I'm having a problem with changing `HorizontalDecreaseRectangle`. I tried creating a border with its name and set the necessary corner radius but for some reason the width automatically fills the entire grid (which supposedly should just be between the minimum to the value but now it's from the minimum to the maximum). I think there's some innate method somewhere that's converting the rectangle to the appropriate width but since I change it to a border (so that I could have access to the corner radius property), it won't recognize it and won't proceed with the calculations to set the proper width.

I attached a code below of my current progress (I've also commented out the border version of `HorizontalDecreaseRectangle` that I made).

Thank you very much.

Attachment: sfRangeSliderCode_c573e801.rar

[Sakthivel Palaniyappan]

Hi Mark,

We have validated your query and created sample based on your code snippet to achieve your requirement .Please find the sample from below link

Sample:https://www.syncfusion.com/downloads/support/directtrac/general/ze/RangeSliderWPF1188316914

In this sample, we have added the border as like  below code snippet to achieve your requirement.

Code Snippet:

 

 <Border 

                                            x:Name="HorizontalDecreaseRectangle" 

                                            Grid.Row="1" 

                                            Grid.ColumnSpan="3" 

                                            HorizontalAlignment="Left" 

                                            Background="{TemplateBinding Foreground}" 

                                            CornerRadius="8,0,0,8"> 

                                            <Border.Width> 

                                                <MultiBinding Converter="{StaticResource RadiusConverter}"> 

                                                    <Binding Path="Width" RelativeSource="{RelativeSource TemplatedParent}" /> 

                                                    <Binding Path="Value" RelativeSource="{RelativeSource TemplatedParent}" /> 

                                                    <Binding Path="Maximum" RelativeSource="{RelativeSource TemplatedParent}" /> 

                                                </MultiBinding> 

                                            </Border.Width> 

                                        </Border> 

Please let us know if you have any concern.

Regards,
Sakthivel P. 

[Mark]

Hi Mark,

We have validated your query and created sample based on your code snippet to achieve your requirement .Please find the sample from below link

Sample:https://www.syncfusion.com/downloads/support/directtrac/general/ze/RangeSliderWPF1188316914

In this sample, we have added the border as like  below code snippet to achieve your requirement.

Code Snippet:

 

 <Border 

                                            x:Name="HorizontalDecreaseRectangle" 

                                            Grid.Row="1" 

                                            Grid.ColumnSpan="3" 

                                            HorizontalAlignment="Left" 

                                            Background="{TemplateBinding Foreground}" 

                                            CornerRadius="8,0,0,8"> 

                                            <Border.Width> 

                                                <MultiBinding Converter="{StaticResource RadiusConverter}"> 

                                                    <Binding Path="Width" RelativeSource="{RelativeSource TemplatedParent}" /> 

                                                    <Binding Path="Value" RelativeSource="{RelativeSource TemplatedParent}" /> 

                                                    <Binding Path="Maximum" RelativeSource="{RelativeSource TemplatedParent}" /> 

                                                </MultiBinding> 

                                            </Border.Width> 

                                        </Border> 

Please let us know if you have any concern.

Regards,
Sakthivel P. 

Sorry for the very late reply. I tried this example today and it's almost what I needed but there's a few problems:

1. Dragging towards the minimum value - The corner radius seems to change whenever I drag the value towards the minimum value. If you look closely, the curve changes into more of a square before getting covered by the value circle.

2. Dragging towards the maximum value - Same thing but unlike the minimum value, when I drag the value towards the maximum value, you could clearly see the curved corners turn into a square.

[Sakthivel Palaniyappan]

Hi Mark,

Thanks for the update.

We have checked the reported issue and modified the sample to resolve the reported issue. Please find the sample from below location.

Sample:
https://www.syncfusion.com/downloads/support/directtrac/general/ze/RangeSliderWPF-1763877359.zip

Please let us know if you have any concern.

Regards,
Sakthivel P.