How to limit values between two range sliders

[Tamas Cons]

Hello.So let's say we have 2 range sliders . How do we limit the values on one of the range sliders based on the other?

Example: I have two sliders with value between 1 and 10,I select in the first one 3 as RangeStart,how do I limit on the second on based on this value the user not to be able to select a value that is lower than 3 for RangeEnd(again, on the second slider!)?

Thanks,Norbert

[Hemalatha Marikumar]

Hi Norbert, 

 

Greetings from Syncfusion. 

 

We have analyzed your query. You can achieve this requirement by binding Value property to Minimum as like below code snippet. 

 

XAML: 

<rangeSlider:SfRangeSlider x:Name="range" Minimum="0" " Maximum="10" Value="3"/> 

<rangeSlider:SfRangeSlider BindingContext="{x:Reference Name=range Minimum="{Binding Path=Value, Converter={StaticResource doubleToInt}}" Maximum="10" /> 

  

Output: 

 

We have created a sample based on your requirement, please download the sample from below location. 

 

Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/RangeSliderSample-883699948.zip  

 

Please let us know if you have any other queries. 

 

Regards,
Hemalatha M. 

[Tamas Cons]

Hello,it is not exactly the scenario I was looking for.

question 1: so let's say we have 2 range sliders,rangesliderA and rangesliderB.Both have a min value of 1,and a max value of 10,steps are 1. 

If I select on rangesliderA a value of 4,I want rangesliderB minValue to jump to value 4 as well,and to not be able to select a lower value than 4,but rangesliderB to still have a range from 1 to 10 unchanged.Is that possible?

and another one,question 2: Is there a way , when having a range slider, to set the maximum value to be bigger than the minimum value,that is not to be able to select same values,because in this moment we can select the same min and max value,but I would want to limit the higher value to be always higher than the lower value,not just higher or equal.

Thanks!

[Hemalatha Marikumar]

Hi Norbert, 

Thanks for your update. 

We would like to let you know that currently we don’t have a direct support to achieve your requirement. We have handled RangeSlider’s PropertyChanged event to achieve your requirement. 

Query 1: How do we limit the values on one of the range sliders based on the other? 

You can achieve this requirement by binding the RangeStart property value of RangeSliderA to RangeStart property value of RangeSliderB and limit the values using PropertyChanged event as like below code snippet. 

Code snippet [XAML]: 

 

<rangeSlider:SfRangeSlider  

    x:Name="rangeSlider1"  

    Minimum="0"  

    RangeEnd="{Binding RangeSliderEnd}" 

    RangeStart="{Binding RangeSliderStart}"  

    ShowValueLabel="True" Orientation="Horizontal" 

    PropertyChanged="RangeSlider1_PropertyChanged"  

    TickFrequency="20"  

    Maximum="100"  

    ShowRange="True"/> 

 

<rangeSlider:SfRangeSlider 

    x:Name="rangeSlider2"   

    RangeStart="{Binding InternalRangeStart}"  

    Orientation="Horizontal" 

    ShowValueLabel="True"  

    TickFrequency="20" 

    Minimum="0"  

    PropertyChanged="RangeSlider2_PropertyChanged" 

    Maximum="100"  

    ShowRange="True" /> 

 

        

Code snippet [C#] 

private void RangeSlider2_PropertyChanged(object sender, PropertyChangedEventArgs e) 

{ 

    if (e.PropertyName == "RangeStart") 

    { 

        if (rangeSlider2.RangeStart <= rangeSlider1.RangeStart) 

        { 

            viewModel.InternalRangeStart = rangeSlider1.RangeStart; 

        } 

    } 

} 

  

Query 2: Is there a way to set RangeSlider maximum value to be bigger than the minimum value? 

You can achieve this requirement by triggering the PropertyChanged event and using that event you can customize based on our requirement as like below code snippet. 

Code snippet [C#]: 

private void RangeSlider1_PropertyChanged(object sender, PropertyChangedEventArgs e) 

{ 

    var rangeSlider = sender as SfRangeSlider; 

    var rangeStart = rangeSlider.RangeStart + 2; 

 

    if (e.PropertyName == "RangeStart") 

    { 

        viewModel.InternalRangeStart = rangeSlider.RangeStart; 

 

        if (rangeSlider.RangeEnd <= rangeStart) 

        { 

            viewModel.RangeSliderStart = rangeSlider.RangeEnd - 2; 

        } 

    } 

    else if (e.PropertyName == "RangeEnd") 

    { 

        if (rangeSlider.RangeEnd <= rangeStart) 

        { 

            viewModel.RangeSliderEnd = rangeStart; 

        } 

    } 

} 

 

We have created sample based on your requirement, please find the sample from below location. 

Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/RangeSliderSample1607027140.zip

 

Regards,
Hemalatha M. 

[Hemalatha Marikumar]

Hi Norbert, 

 

We would like to let you know that the provided solution in below update can only work with the fix of “PropertyChanged event is not triggered for RangeEnd property”. Please find the patch in below 

 

Assemblies:  

http://syncfusion.com/Installs/support/patch/17.3.0.14/1069558/F148299/SyncfusionPatch_17.3.0.14_1069558_10162019072516455_F148299.zip    

(OR) 

Nuget:  

http://syncfusion.com/Installs/support/patch/17.3.0.14/1069558/F148299/SyncfusionNuget_17.3.0.14_1069558_10162019072516455_F148299.zip   

  

Assembly version: 17.3.0.14  

  

Note: Before applying the patch, please clear the cache   

https://www.syncfusion.com/kb/6987/how-to-clear-nuget-cache   

   

Disclaimer:  

Please note that we have created this patch for the version v17.3.0.14 specifically to resolve the issue reported in this. 

This fix will be included in our upcoming weekly nuget release which is scheduled on 22^nd October 2019.  

Regards,
Hemalatha M. 

[Tamas Cons]

Thanks for your efforts! Can you make this feature from question 2 available as a property of the rangeSlider? Like having a property EgalityAllowed,and if is set to false it will not allow a range sliders max value to be the same as the min value.Because otherwise we have lots of sliders and we have to copy paste your solution everywhere in code behind files.I am waiting for your response,Regards,Norbert

[Hemalatha Marikumar]

Hi Norbert, 

 

Thanks for your update. 

 

We have validated your query. We would like to let you know that we have logged a feature request on this, and it can be tracked through our feedback portal below.  

 

Link: https://www.syncfusion.com/feedback/9575/equalityallowed-support-for-rangethumb-in-sfrangeslider 

 

Please upvote this feature to make this our priority. While this feature itself is important we will prioritize the features every release, based on the user demands. 

 

If you have any more specification/suggestions to the feature request, you can add it as a comment in the portal.  

 

Regards, 

Hemalatha M.