1. Home
  2. Forum
  3. Xamarin.Forms
  4. How to limit values between two range sliders

How to limit values between two range sliders

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

6 Replies
HM Hemalatha Marikumar Syncfusion Team October 16, 2019 09:54 AM UTC

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. 
 
 
Please let us know if you have any other queries. 
 
Regards,
Hemalatha M. 


TC Tamas Cons October 16, 2019 11:14 AM UTC

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!

HM Hemalatha Marikumar Syncfusion Team October 17, 2019 12:55 PM UTC

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. 
Regards,
Hemalatha M. 


HM Hemalatha Marikumar Syncfusion Team October 17, 2019 01:37 PM UTC

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:  

(OR) 

Nuget:  
  
Assembly version: 17.3.0.14  
  
Note: Before applying the patch, please clear the 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 22nd October 2019.  

Regards,
Hemalatha M. 


TC Tamas Cons October 17, 2019 01:53 PM UTC

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

HM Hemalatha Marikumar Syncfusion Team October 18, 2019 12:31 PM UTC

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.  
 
 
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.  
 


Loader.
Up arrow icon