.NET MAUI Slider & Range Slider: Track

• Jan 30, 2024

You can drag the thumb along the track , to change the current value.

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

• XAML

<dxe:DXSlider Value="25">
    <dxe:DXSliderBase.TrackAppearance>
        <dxe:DXSliderTrackAppearance 
            ActiveBackgroundColor="#d65418"
            BackgroundColor="#faccb6" 
            DisabledActiveBackgroundColor="#cc9621" 
            DisabledBackgroundColor="#fae3b1"
            CornerRadius="10" 
            Thickness="20" />
    </dxe:DXSliderBase.TrackAppearance> 
</dxe:DXSlider>

<dxe:DXRangeSlider StartValue="15" EndValue="85">
    <dxe:DXSliderBase.TrackAppearance>
        <dxe:DXSliderTrackAppearance 
            ActiveBackgroundColor="#d65418"
            BackgroundColor="#faccb6" 
            DisabledActiveBackgroundColor="#cc9621" 
            DisabledBackgroundColor="#fae3b1"
            CornerRadius="10" 
            Thickness="20" />
    </dxe:DXSliderBase.TrackAppearance> 
</dxe:DXRangeSlider>

You can use the following properties to change track appearance in DXSlider and DXRangeSlider controls:

DXSliderTrackAppearance.ActiveBackgroundColorGets or sets the background color of the track in the active state. This is a bindable property.DXSliderTrackAppearance.BackgroundColorGets or sets the background color of the track. This is a bindable property.DXSliderTrackAppearance.DisabledActiveBackgroundColorGets or sets the background color of the track in active and disabled states. This is a bindable property.DXSliderTrackAppearance.DisabledBackgroundColorGets or sets the background color of the track in the disabled state. This is a bindable property.DXSliderTrackAppearance.CapLengthGets or sets the cap length of the track. This is a bindable property.DXSliderTrackAppearance.CornerRadiusGets or sets the corner radius of the track. This is a bindable property.DXSliderTrackAppearance.ThicknessGets or sets the track thickness. This is a bindable property.