MAUI

  • User Guide
  • Demos
  • Support
  • Forums
  • Download
Class RangeSliderBase<T>

    Show / Hide Table of Contents

    Class RangeSliderBase<T>

    RangeSliderBase<T> is a base class for SfRangeSlider, SfDateTimeRangeSlider, and RangeSelectorBase<T>.

    Inheritance
    System.Object
    SfView
    RangeView<T>
    RangeSliderBase<T>
    RangeSelectorBase<T>
    SfDateTimeRangeSlider
    SfRangeSlider
    Implements
    IDrawableLayout
    Microsoft.Maui.Graphics.IDrawable
    Microsoft.Maui.IAbsoluteLayout
    Microsoft.Maui.ILayout
    Microsoft.Maui.IView
    Microsoft.Maui.IElement
    Microsoft.Maui.ITransform
    Microsoft.Maui.IContainer
    System.Collections.Generic.IList<Microsoft.Maui.IView>
    System.Collections.Generic.ICollection<Microsoft.Maui.IView>
    System.Collections.Generic.IEnumerable<Microsoft.Maui.IView>
    System.Collections.IEnumerable
    Microsoft.Maui.ISafeAreaView
    Microsoft.Maui.IPadding
    Microsoft.Maui.IVisualTreeElement
    Inherited Members
    RangeView<T>.MinimumProperty
    RangeView<T>.MaximumProperty
    RangeView<T>.IntervalProperty
    RangeView<T>.MinorTicksPerIntervalProperty
    RangeView<T>.ShowTicksProperty
    RangeView<T>.ShowLabelsProperty
    RangeView<T>.ShowDividersProperty
    RangeView<T>.IsInversedProperty
    RangeView<T>.TrackExtentProperty
    RangeView<T>.LabelsPlacementProperty
    RangeView<T>.EdgeLabelsPlacementProperty
    RangeView<T>.EnableDeferredUpdateProperty
    RangeView<T>.DeferredUpdateDelayProperty
    RangeView<T>.TrackStyleProperty
    RangeView<T>.ThumbStyleProperty
    RangeView<T>.ThumbOverlayStyleProperty
    RangeView<T>.DividerStyleProperty
    RangeView<T>.MajorTickStyleProperty
    RangeView<T>.MinorTickStyleProperty
    RangeView<T>.LabelStyleProperty
    RangeView<T>.TooltipProperty
    RangeView<T>.DragStartedCommandProperty
    RangeView<T>.DragStartedCommandParameterProperty
    RangeView<T>.DragCompletedCommandProperty
    RangeView<T>.DragCompletedCommandParameterProperty
    RangeView<T>.ChangeVisualState()
    RangeView<T>.OnBindingContextChanged()
    RangeView<T>.OnPropertyChanged(String)
    RangeView<T>.OnHandlerChanged()
    RangeView<T>.MeasureContent(Double, Double)
    RangeView<T>.ArrangeContent(Rect)
    RangeView<T>.OnDraw(ICanvas, RectF)
    RangeView<T>.Minimum
    RangeView<T>.Maximum
    RangeView<T>.Interval
    RangeView<T>.MinorTicksPerInterval
    RangeView<T>.ShowDividers
    RangeView<T>.ShowTicks
    RangeView<T>.ShowLabels
    RangeView<T>.IsInversed
    RangeView<T>.TrackExtent
    RangeView<T>.LabelsPlacement
    RangeView<T>.EdgeLabelsPlacement
    RangeView<T>.EnableDeferredUpdate
    RangeView<T>.DeferredUpdateDelay
    RangeView<T>.TrackStyle
    RangeView<T>.ThumbStyle
    RangeView<T>.ThumbOverlayStyle
    RangeView<T>.DividerStyle
    RangeView<T>.MajorTickStyle
    RangeView<T>.MinorTickStyle
    RangeView<T>.LabelStyle
    RangeView<T>.Tooltip
    RangeView<T>.DragStartedCommand
    RangeView<T>.DragStartedCommandParameter
    RangeView<T>.DragCompletedCommand
    RangeView<T>.DragCompletedCommandParameter
    RangeView<T>.ValueChangeStart
    RangeView<T>.ValueChangeEnd
    RangeView<T>.LabelCreated
    SfView.MeasureOverride(Double, Double)
    SfView.ArrangeOverride(Rect)
    SfView.OnMeasure(Double, Double)
    SfView.IDrawableLayout.InvalidateDrawable()
    SfView.Children
    SfView.ClipToBounds
    SfView.Padding
    SfView.IDrawableLayout.DrawingOrder
    Namespace: Syncfusion.Maui.Sliders
    Assembly: Syncfusion.Maui.Sliders.dll
    Syntax
    public abstract class RangeSliderBase<T> : RangeView<T>, IDrawableLayout, IDrawable, IAbsoluteLayout, ILayout, IView, IElement, ITransform, IContainer, IList<IView>, ICollection<IView>, IEnumerable<IView>, IEnumerable, ISafeAreaView, IPadding, IVisualTreeElement, ITouchListener, ITapGestureListener, IPanGestureListener, IGestureListener
    Type Parameters
    Name Description
    T

    Constructors

    RangeSliderBase()

    Declaration
    protected RangeSliderBase()

    Fields

    DragBehaviorProperty

    The backing store for the DragBehavior field.

    Declaration
    public static readonly BindableProperty DragBehaviorProperty
    Field Value
    Type Description
    Microsoft.Maui.Controls.BindableProperty

    Microsoft.Maui.Controls.BindableProperty.

    EnableIntervalSelectionProperty

    The backing store for the EnableIntervalSelection field.

    Declaration
    public static readonly BindableProperty EnableIntervalSelectionProperty
    Field Value
    Type Description
    Microsoft.Maui.Controls.BindableProperty

    Microsoft.Maui.Controls.BindableProperty.

    EndThumbIconProperty

    The backing store for the EndThumbIcon field.

    Declaration
    public static readonly BindableProperty EndThumbIconProperty
    Field Value
    Type Description
    Microsoft.Maui.Controls.BindableProperty

    Microsoft.Maui.Controls.BindableProperty.

    RangeEndProperty

    The backing store for the RangeEnd field.

    Declaration
    public static readonly BindableProperty RangeEndProperty
    Field Value
    Type Description
    Microsoft.Maui.Controls.BindableProperty

    Microsoft.Maui.Controls.BindableProperty.

    RangeStartProperty

    The backing store for the RangeStart field.

    Declaration
    public static readonly BindableProperty RangeStartProperty
    Field Value
    Type Description
    Microsoft.Maui.Controls.BindableProperty

    Microsoft.Maui.Controls.BindableProperty.

    StartThumbIconProperty

    The backing store for the StartThumbIcon field.

    Declaration
    public static readonly BindableProperty StartThumbIconProperty
    Field Value
    Type Description
    Microsoft.Maui.Controls.BindableProperty

    Microsoft.Maui.Controls.BindableProperty.

    Properties

    DragBehavior

    Gets or sets the value which indicates the behavior of the thumb dragging.
    OnThumb -Individual thumb can be moved when dragging.
    BetweenThumbs -Both thumbs can be moved when dragging the range between start and end thumb.
    Both -Individual thumb can be moved when dragging the thumb and also, both thumbs can be moved when dragging the range between start and end thumb.

    Declaration
    public SliderDragBehavior DragBehavior { get; set; }
    Property Value
    Type Description
    SliderDragBehavior

    Defaults to OnThumb.

    Remarks

    StepSize and StepDuration properties doesn't work on setting BetweenThumbs.

    Examples

    Snippet for SfRangeSlider

    • XAML
    • C#
    <sliders:SfRangeSlider DragBehavior = "BetweenThumbs" />
      SfRangeSlider rangeSlider = new SfRangeSlider()
      {
          DragBehavior = SliderDragBehavior.BetweenThumbs
      };

    Snippet for SfDateTimeRangeSlider

    • XAML
    • C#
    <sliders:SfDateTimeRangeSlider DragBehavior = "BetweenThumbs" />
    SfDateTimeRangeSlider rangeSlider = new SfDateTimeRangeSlider()
    {
        DragBehavior = SliderDragBehavior.BetweenThumbs
    };

    Snippet for SfRangeSelector

    • XAML
    • C#
    <sliders:SfRangeSelector DragBehavior = "BetweenThumbs" />
    SfRangeSelecotr rangeSelector = new SfRangeSelector()
    {
        DragBehavior = SliderDragBehavior.BetweenThumbs
    };

    Snippet for SfDateTimeRangeSelector

    • XAML
    • C#
    <sliders:SfDateTimeRangeSelector DragBehavior = "BetweenThumbs" />
    SfDateTimeRangeSelector rangeSelector = new SfDateTimeRangeSelector()
    {
        DragBehavior = SliderDragBehavior.BetweenThumbs
    };

    EnableIntervalSelection

    Gets or set a value indicating whether to drag the thumbs in intervals. If true, both the thumbs can be only moved on the specified Interval.

    Declaration
    public bool EnableIntervalSelection { get; set; }
    Property Value
    Type Description
    System.Boolean

    Defaults to false.

    Examples

    Snippet for SfRangeSlider #XAML

    <sliders:SfRangeSlider Minimum="0" 
                           Maximum="100"
                           RangeStart="20"
                           RangeEnd="60"
                           Interval="10"
                           EnableIntervalSelection="True" />

    #C#

    SfRangeSlider rangeSlider = new SfRangeSlider()
    {
         Minimum = 0,
         Maximum = 100, 
         Interval = 10,
         RangeStart = 20,
         RangeEnd = 60,
         EnableIntervalSelection = true
    };

    Snippet for SfDateTimeRangeSlider #XAML

    <sliders:SfDateTimeRangeSlider Minimum="0" 
                                   Maximum="100"
                                   RangeStart="20"
                                   RangeEnd="60"
                                   Interval="10"
                                   EnableIntervalSelection="True" />

    #C#

    SfDateTimeRangeSlider rangeSlider = new SfDateTimeRangeSlider()
    {
         Minimum = 0,
         Maximum = 100, 
         Interval = 10,
         RangeStart = 20,
         RangeEnd = 60,
         EnableIntervalSelection = true
    };

    Snippet for SfRangeSelector #XAML

    <sliders:SfRangeSelector Minimum="0" 
                             Maximum="100"
                             RangeStart="20"
                             RangeEnd="60"
                             Interval="10"
                             EnableIntervalSelection="True" />

    #C#

    SfRangeSelecotr rangeSelector = new SfRangeSelector()
    {
         Minimum = 0,
         Maximum = 100, 
         Interval = 10,
         RangeStart = 20,
         RangeEnd = 60,
         EnableIntervalSelection = true
    };

    Snippet for SfDateTimeRangeSelector #XAML

    <sliders:SfDateTimeRangeSelector Minimum="0" 
                                     Maximum="100"
                                     RangeStart="20"
                                     RangeEnd="60"
                                     Interval="10"
                                     EnableIntervalSelection="True" />

    #C#

    SfDateTimeRangeSelector rangeSelector = new SfDateTimeRangeSelector()
    {
         Minimum = 0,
         Maximum = 100, 
         Interval = 10,
         RangeStart = 20,
         RangeEnd = 60,
         EnableIntervalSelection = true
    };

    EndThumbIcon

    Gets or sets the value for the end thumb.

    Declaration
    public View EndThumbIcon { get; set; }
    Property Value
    Type Description
    Microsoft.Maui.Controls.View

    Defaults to null.

    Examples

    Snippet for SfRangeSlider

    • XAML
    • C#
    <sliders:SfRangeSlider>
       <sliders:SfRangeSlider.EndThumbIcon>
         <Rectangle Fill = "Black"
                   HeightRequest="35"
                   WidthRequest="35">
        </Rectangle>
       </sliders:SfRangeSlider.EndThumbIcon>
    </sliders:SfRangeSlider>
    SfRangeSlider rangeSlider = new SfRangeSlider()
    rangeSlider.EndThumbIcon = new Microsoft.Maui.Controls.Shapes.Rectangle()
    {
        Fill=Brush.Black,
        HeightRequest = 35,
        WidthRequest = 35
    };

    Snippet for SfDateTimeRangeSlider

    • XAML
    • C#
    <sliders:SfDateTimeRangeSlider>
       <sliders:SfDateTimeRangeSlider.EndThumbIcon>
         <Rectangle Fill = "Black"
                   HeightRequest="35"
                   WidthRequest="35">
        </Rectangle>
       </sliders:SfDateTimeRangeSlider.EndThumbIcon>
    </sliders:SfDateTimeRangeSlider>
    SfDateTimeRangeSlider rangeSlider = new SfDateTimeRangeSlider()
    rangeSlider.EndThumbIcon = new Microsoft.Maui.Controls.Shapes.Rectangle()
    {
        Fill=Brush.Black,
        HeightRequest = 35,
        WidthRequest = 35
    };

    Snippet for SfRangeSelector

    • XAML
    • C#
    <sliders:SfRangeSelector>
      <sliders:SfRangeSelector.EndThumbIcon>
        <Rectangle Fill = "Black"
                   HeightRequest="35"
                   WidthRequest="35">
        </Rectangle>
      </sliders:SfRangeSlider.EndThumbIcon>
    </sliders:SfRangeSelector>
    SfRangeSelector rangeSelector = new SfRangeSelector()
    rangeSelector.EndThumbIcon = new Microsoft.Maui.Controls.Shapes.Rectangle()
    {
        Fill=Brush.Black,
        HeightRequest = 35,
        WidthRequest = 35
    };

    Snippet for SfDateTimeRangeSelector

    • XAML
    • C#
    <sliders:SfDateTimeRangeSelector>
      <sliders:SfDateTimeRangeSelector.EndThumbIcon>
        <Rectangle Fill = "Black"
                   HeightRequest="35"
                   WidthRequest="35">
        </Rectangle>
      </sliders:SfDateTimeRangeSelector.EndThumbIcon>
    </sliders:SfDateTimeRangeSelector>
    SfDateTimeRangeSelector rangeSelector = new SfDateTimeRangeSelector()
    rangeSelector.EndThumbIcon = new Microsoft.Maui.Controls.Shapes.Rectangle()
    {
        Fill=Brush.Black,
        HeightRequest = 35,
        WidthRequest = 35
    };

    RangeEnd

    Gets or sets the range end value of the track.

    Declaration
    public T RangeEnd { get; set; }
    Property Value
    Type Description
    T

    Defaults to 0.75 for SfRangeSlider, SfRangeSelector and null for SfDateTimeRangeSlider, SfDateTimeRangeSelector.

    Examples

    Snippet for SfRangeSlider

    • XAML
    • C#
    <sliders:SfRangeSlider RangeEnd="0.6" />
    SfRangeSlider rangeSlider = new SfRangeSlider()
    {
       RangeEnd = 0.6
    };

    Snippet for SfRangeSelector

    • XAML
    • C#
    <sliders:SfRangeSelector RangeEnd="0.6" />
    SfRangeSelector rangeSelector = new SfRangeSelector()
    {
       RangeEnd = 0.6
    };

    Snippet for SfDateTimeRangeSlider

    • XAML
    • C#
    <sliders:SfDateTimeRangeSlider RangeEnd = "2010-1-1" />
    SfDateTimeRangeSlider rangeSlider = new SfDateTimeRangeSlider()
    {
        RangeEnd = new DateTime(2010, 1, 1)
    };

    Snippet for SfDateTimeRangeSelector

    • XAML
    • C#
    <sliders:SfDateTimeRangeSelector RangeEnd="2010-1-1" />
    SfDateTimeRangeSelector rangeSelector = new SfDateTimeRangeSelector()
    {
        RangeEnd = new DateTime(2010, 1, 1)
    };

    RangeStart

    Gets or sets the thumb start value of the track.

    Declaration
    public T RangeStart { get; set; }
    Property Value
    Type Description
    T

    Defaults to 0.25 for SfRangeSlider, SfRangeSelector and null for SfDateTimeRangeSlider, SfDateTimeRangeSelector.

    Examples

    Snippet for SfRangeSlider

    • XAML
    • C#
    <sliders:SfRangeSlider RangeStart="0.3" />
    SfRangeSlider rangeSlider = new SfRangeSlider()
    {
       RangeStart = 0.3, 
    };

    Snippet for SfRangeSelector

    • XAML
    • C#
    <sliders:SfRangeSelector RangeStart="0.3" />
    SfRangeSelector rangeSelector = new SfRangeSelector()
    {
       RangeStart = 0.3, 
    };

    Snippet for SfDateTimeRangeSlider

    • XAML
    • C#
    <sliders:SfDateTimeRangeSlider RangeStart = "2010-1-1" />
    SfDateTimeRangeSlider rangeSlider = new SfDateTimeRangeSlider()
    {
        RangeStart = new DateTime(2010, 1, 1)
    };

    Snippet for SfDateTimeRangeSelector

    • XAML
    • C#
    <sliders:SfDateTimeRangeSelector RangeStart="2010-1-1" />
    SfDateTimeRangeSelector rangeSelector = new SfDateTimeRangeSelector()
    {
        RangeStart = new DateTime(2010, 1, 1)
    };

    StartThumbIcon

    Gets or sets the value for the start thumb.

    Declaration
    public View StartThumbIcon { get; set; }
    Property Value
    Type Description
    Microsoft.Maui.Controls.View

    Defaults to null.

    Examples

    Snippet for SfRangeSlider

    • XAML
    • C#
    <sliders:SfRangeSlider>
       <sliders:SfRangeSlider.StartThumbIcon>
         <Rectangle Fill = "Black"
                    HeightRequest="35"
                    WidthRequest="35">
         </Rectangle>
       </sliders:SfRangeSlider.StartThumbIcon>
    </sliders:SfRangeSlider>
    SfRangeSlider rangeSlider = new SfRangeSlider()
    rangeSlider.StartThumbIcon = new Microsoft.Maui.Controls.Shapes.Rectangle()
    {
        Fill=Brush.Black,
        HeightRequest = 35,
        WidthRequest = 35
    };

    Snippet for SfDateTimeRangeSlider

    • XAML
    • C#
    <sliders:SfDateTimeRangeSlider>
       <sliders:SfDateTimeRangeSlider.StartThumbIcon>
         <Rectangle Fill = "Black"
                    HeightRequest="35"
                    WidthRequest="35">
         </Rectangle>
       </sliders:SfDateTimeRangeSlider.StartThumbIcon>
    </sliders:SfDateTimeRangeSlider>
    SfDateTimeRangeSlider rangeSlider = new SfDateTimeRangeSlider()
    rangeSlider.StartThumbIcon = new Microsoft.Maui.Controls.Shapes.Rectangle()
    {
        Fill=Brush.Black,
        HeightRequest = 35,
        WidthRequest = 35
    };

    Snippet for SfRangeSelector

    • XAML
    • C#
    <sliders:SfRangeSelector>
      <sliders:SfRangeSelector.StartThumbIcon>
        <Rectangle Fill = "Black"
                   HeightRequest="35"
                   WidthRequest="35">
        </Rectangle>
      </sliders:SfRangeSlider.StartThumbIcon>
    </sliders:SfRangeSelector>
    SfRangeSelector rangeSelector = new SfRangeSelector()
    rangeSelector.StartThumbIcon = new Microsoft.Maui.Controls.Shapes.Rectangle()
    {
        Fill=Brush.Black,
        HeightRequest = 35,
        WidthRequest = 35
    };

    Snippet for SfDateTimeRangeSelector

    • XAML
    • C#
    <sliders:SfDateTimeRangeSelector>
      <sliders:SfDateTimeRangeSelector.StartThumbIcon>
        <Rectangle Fill = "Black"
                   HeightRequest="35"
                   WidthRequest="35">
        </Rectangle>
      </sliders:SfDateTimeRangeSelector.StartThumbIcon>
    </sliders:SfDateTimeRangeSelector>
    SfDateTimeRangeSelector rangeSelector = new SfDateTimeRangeSelector()
    rangeSelector.StartThumbIcon = new Microsoft.Maui.Controls.Shapes.Rectangle()
    {
        Fill=Brush.Black,
        HeightRequest = 35,
        WidthRequest = 35
    };

    Implements

    IDrawableLayout
    Microsoft.Maui.Graphics.IDrawable
    Microsoft.Maui.IAbsoluteLayout
    Microsoft.Maui.ILayout
    Microsoft.Maui.IView
    Microsoft.Maui.IElement
    Microsoft.Maui.ITransform
    Microsoft.Maui.IContainer
    System.Collections.Generic.IList<>
    System.Collections.Generic.ICollection<>
    System.Collections.Generic.IEnumerable<>
    System.Collections.IEnumerable
    Microsoft.Maui.ISafeAreaView
    Microsoft.Maui.IPadding
    Microsoft.Maui.IVisualTreeElement
    Back to top Generated by DocFX
    Copyright © 2001 - 2023 Syncfusion Inc. All Rights Reserved