Skip to main content
All docs
V24.2

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

DxRangeSelectorSliderMarker.PaddingTopBottom Property

Specifies the padding between the top or bottom marker edge and marker content.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

#Declaration

C#
[DefaultValue(2)]
[Parameter]
public int PaddingTopBottom { get; set; }

#Property Value

Type Default Description
Int32 2

The padding in pixels.

#Remarks

DxRangeSelector displays sliders that allow a user to select a range. Sliders consist of handles and markers.

Range Selector - Sliders

Use the PaddingLeftRight or PaddingTopBottom property to add or remove empty space around marker content.

The following code snippet removes paddings between marker edges and content:

Range Selector - Remove Marker Paddings

Razor
<DxRangeSelector Width="1000px"
                 Height="400px"
                 SelectedRangeStartValue="@(new DateTime(2024, 2, 1))"
                 SelectedRangeEndValue="@(new DateTime(2024, 2, 14))">
    <DxRangeSelectorSliderMarker PaddingLeftRight="0"
                                 PaddingTopBottom="0">
        <DxTextFormatSettings Type="TextFormat.MonthAndDay" />
    </DxRangeSelectorSliderMarker>
    <DxRangeSelectorScale StartValue="@(new DateTime(2024, 1, 1))"
                          EndValue="@(new DateTime(2024, 6, 1))"
                          MinorTickInterval="ChartAxisInterval.Day"
                          TickInterval="ChartAxisInterval.Week"
                          MaxRange="ChartAxisInterval.Month"
                          MinRange="ChartAxisInterval.Week"
                          ValueType="ChartAxisDataType.DateTime">
        <DxRangeSelectorScaleMarker Visible="false" />
    </DxRangeSelectorScale>
</DxRangeSelector>

Refer to the DxRangeSelectorSliderMarker class description for more information.

See Also