Search code examples
c#iosxamarin.iossyncfusion

Syncfusion SfRangeSlider slider and label don't align properly when using autolayout constrains


Environment: Xamarin.iOS (NOT Xamarin.Forms), C#, Syncfusion components for Xamarin.iOS version 17.3.0.14

I am trying to use the Syncfusion SfRangeSlider to allow users select a value on a scale of 0-10. I add the SfRangeSlider instances in the ViewController's ViewDidLoad event and add autolayout constraints pinning slider's leading and training edges to the container and giving it a fixed height.

On initial load of the screen, the slider and the label that displays the notches and step values on the slider do not align properly (see screenshot below), the slider is noticeably shorter than the label. Once the slider is dragged a bit, the slider is then readjusted to match the width of the label.

Is there a way to keep the slider and the label to match each-other's width or is this a bug in the component?

Sample of how the slider is added to the screen

public class SampleViewController : UIViewController
{
    public override void ViewDidLoad()
    {
        base.ViewDidLoad();
        // Perform any additional setup after loading the view, typically from a nib.

        // create slider and add to View
        var contentSlider = new SfRangeSlider 
        {
            TickPlacement = SFTickPlacement.SFTickPlacementBottomRight,
            ValuePlacement = SFValuePlacement.SFValuePlacementBottomRight,
            SnapsTo = SFSnapsTo.SFSnapsToTicks,
            Maximum = 10,
            RangeEnd = 10,
            RangeStart = 0,
            StepFrequency = 1,
            TickFrequency = 1,
            TickColor = UIColor.White,
            ShowRange = false,
            TranslatesAutoresizingMaskIntoConstraints = false
        };
        View.AddSubview(contentSlider);

        // set up constraints for views
        View.AddConstraints(new NSLayoutConstraint[]{
            NSLayoutConstraint.Create(contentSlider, NSLayoutAttribute.Top, NSLayoutRelation.Equal, View, NSLayoutAttribute.Top, 1.0f, 0.0f),
            NSLayoutConstraint.Create(contentSlider, NSLayoutAttribute.Leading, NSLayoutRelation.Equal, View, NSLayoutAttribute.Leading, 1.0f, 20.0f),
            NSLayoutConstraint.Create(contentSlider, NSLayoutAttribute.Trailing, NSLayoutRelation.Equal, View, NSLayoutAttribute.Trailing, 1.0f, -20.0f),
            NSLayoutConstraint.Create(contentSlider, NSLayoutAttribute.Height, NSLayoutRelation.Equal, 1f, 50f)
        });
    }
}

NOTE: this SampleViewController is presented inside of a UINavigationViewController

Initial Screen Load screenshot

enter image description here

First slider dragged a bit

enter image description here


Solution

  • Greetings from Syncfusion. We have checked the reported issue “Label of SfRangeSlider is not aligned properly while loading, it refreshes its layout only when changing the value” and were able to reproduce the same. We have already logged a defect report regarding on this and it can be tracked through our feedback portal below.

    Feedback link: https://www.syncfusion.com/feedback/10189/rangeslider-displays-the-last-additional-label-values

    This fix will be included in our weekly release which is expected to be rolled out on November 26, 2019.