.NET MAUI Slider & Range Slider: Thumb

• Jan 30, 2024
• 2 minutes to read

The thumb allows users to change the selected value. To change the current value, move the thumb along the scale.

The following example changes thumb appearance in DXSlider and DXRangeSlider controls:

• XAML

<dxe:DXSlider Value="25">
    <dxe:DXSlider.ThumbAppearance>
        <dxe:DXSliderThumbAppearance 
            BackgroundColor="orange" 
            BorderColor="black"
            DisabledBackgroundColor="gray"
            DisabledBorderColor="black"
            BorderThickness="2"
            CornerRadius="25"
            Height="25"
            Width="25"
            PressedHeight="15"
            PressedWidth="15" />
    </dxe:DXSlider.ThumbAppearance> 
</dxe:DXSlider>

<dxe:DXRangeSlider StartValue="15" EndValue="85">
    <dxe:DXRangeSlider.StartThumbAppearance>
        <dxe:DXSliderThumbAppearance 
            BackgroundColor="orange" 
            BorderColor="black"
            DisabledBackgroundColor="gray"
            DisabledBorderColor="black"
            BorderThickness="2"
            CornerRadius="25"
            Height="25"
            Width="25" />
    </dxe:DXRangeSlider.StartThumbAppearance> 

    <dxe:DXRangeSlider.EndThumbAppearance>
        <dxe:DXSliderThumbAppearance ... />
    </dxe:DXRangeSlider.EndThumbAppearance> 
</dxe:DXRangeSlider>

Use the following properties to change thumb appearance in DXSlider and DXRangeSlider controls:

DXSliderThumbAppearance.BackgroundColorGets or sets the background color of the thumb. This is a bindable property.DXSliderThumbAppearance.BorderColorGets or sets the border color of the thumb. This is a bindable property.DXSliderThumbAppearance.DisabledBackgroundColorGets or sets the background color of the thumb in the disabled state. This is a bindable property.DXSliderThumbAppearance.DisabledBorderColorGets or sets the border color of the thumb in the disabled state. This is a bindable property.DXSliderThumbAppearance.BorderThicknessGets or sets the border thickness of the thumb. This is a bindable property.DXSliderThumbAppearance.CornerRadiusGets or sets the corner radius of the thumb. This is a bindable property.DXSliderThumbAppearance.HeightGets or sets the thumb height. This is a bindable property.DXSliderThumbAppearance.WidthGets or sets the thumb width. This is a bindable property.DXSliderThumbAppearance.PressedHeightGets or sets the thumb height in the pressed state. This is a bindable property.DXSliderThumbAppearance.PressedWidthGets or sets the thumb width in the pressed state. This is a bindable property.DXSliderThumbAppearance.SideMarginGets or sets the margins to the left and right sides of the thumb. This is a bindable property.