Events in WPF RangeSlider(SfRangeSlider)

6 Feb 202513 minutes to read

How to trigger LabelLoaded event?

The LabelLoaded event is triggered when the slider label is created. The argument contains the label content.

Content - Used to gets or sets the content of the label.

<editors:SfRangeSlider
                    Width="300"
                    LabelLoaded="SfRangeSlider_LabelLoaded"
                    Maximum="200"
                    Minimum="100"
                    ShowValueLabels="True"
                    TickFrequency="20"
                    TickPlacement="Outside" />
public MainWindow()
        {
            InitializeComponent();

            Grid parentGrid = new Grid();
            SfRangeSlider rangeSlider = new SfRangeSlider()
            {
                Width = 300,
                Maximum = 200,
                Minimum = 100,
                Value = 140,
                ShowValueLabels = true,
                TickFrequency = 20,
                TickPlacement = Syncfusion.Windows.Controls.Input.TickPlacement.Outside
            };
            rangeSlider.LabelLoaded += SfRangeSlider_LabelLoaded;
            parentGrid.Children.Add(rangeSlider);
            this.Content = parentGrid;
        }

        private void SfRangeSlider_LabelLoaded(object sender, LabelLoadedEventArgs e)
        {
            e.Content = e.Content + "%";
        }

How to trigger RangeChangedEvent?

The RangeChanged event is triggered when either RangeStart or RangeEnd values are changed. The argument contains the following information.

NewEndValue – Gets or sets the new end value of range slider.
NewStartValue – Gets or sets the new start value of range slider.
OldStartValue – Gets or sets the old start value of range slider.
OldEndValue – Gets or set the old end value of range slider.

<editors:SfRangeSlider
                    Width="300"
                    RangeChanged="SfRangeSlider_RangeChanged"
                    Maximum="100"
                    Minimum="0"
                    ShowRange="True"
                    RangeStart="30"
                    RangeEnd="60"/>
public MainWindow()
        {
            InitializeComponent();

            Grid parentGrid = new Grid();
            SfRangeSlider rangeSlider = new SfRangeSlider()
            {
                Width = 300,
                Maximum = 100,
                Minimum = 0,
                Value = 140,
                ShowRange = true,
                RangeStart = 30,
                RangeEnd = 60
            };

            rangeSlider.RangeChanged += SfRangeSlider_RangeChanged;
            parentGrid.Children.Add(rangeSlider);
            this.Content = parentGrid;
        }

        private void SfRangeSlider_RangeChanged(object sender, RangeChangedEventArgs e)
        {
            var newStartValue = e.NewStartValue;
            var newEndValue = e.NewEndValue;
            var oldStartValue = e.OldStartValue;
            var oldEndValue = e.OldEndValue;
        }

How to trigger RangeStartChanged event?

The RangeStartChanged event is triggered when RangeStart value is changed. The argument contains the following information.

OldStartValue – Gets or sets the old start value of range slider.
NewStartValue – Gets or sets the new start value of range slider.

<editors:SfRangeSlider
                    Width="300"
                    RangeStartChanged="SfRangeSlider_RangeStartChanged"
                    Maximum="100"
                    Minimum="0"
                    ShowRange="True"
                    RangeStart="30"
                    RangeEnd="60"/>
public MainWindow()
        {
            InitializeComponent();

            Grid parentGrid = new Grid();
            SfRangeSlider rangeSlider = new SfRangeSlider()
            {
                Width = 300,
                Maximum = 100,
                Minimum = 0,
                Value = 140,
                ShowRange = true,
                RangeStart = 30,
                RangeEnd = 60
            };

            rangeSlider.RangeStartChanged += SfRangeSlider_RangeStartChanged;
            parentGrid.Children.Add(rangeSlider);
            this.Content = parentGrid;
        }

        private void SfRangeSlider_RangeStartChanged(object sender, RangeStartChagedEventArgs e)
        {
            var newStartValue = e.NewStartValue;
            var oldStartValue = e.OldStartValue;
        }

How to trigger RangeEndChanged event?

The RangeEndChanged event is triggered when RangeEnd value is changed. The argument contains the following information.

OldEndValue – Gets or sets the old end value of range slider.
NewEndValue – Gets or sets the new end value of range slider.

<editors:SfRangeSlider
                    Width="300"
                    RangeEndChanged="SfRangeSlider_RangeEndChanged"
                    Maximum="100"
                    Minimum="0"
                    ShowRange="True"
                    RangeStart="30"
                    RangeEnd="60"/>
public MainWindow()
        {
            InitializeComponent();

            Grid parentGrid = new Grid();
            SfRangeSlider rangeSlider = new SfRangeSlider()
            {
                Width = 300,
                Maximum = 100,
                Minimum = 0,
                Value = 140,
                ShowRange = true,
                RangeStart = 30,
                RangeEnd = 60
            };

            rangeSlider.RangeEndChanged += SfRangeSlider_RangeEndChanged;
            parentGrid.Children.Add(rangeSlider);
            this.Content = parentGrid;
        }

        private void SfRangeSlider_RangeEndChanged(object sender, RangeEndChagedEventArgs e)
        {
            var newEndValue = e.NewEndValue;
            var oldEndValue = e.OldEndValue;
        }