DxRangeSelectorSliderMarker Class

Contains settings for slider markers.

Assembly : DevExpress.Blazor.v25.2.dll

Declaration

csharp

public class DxRangeSelectorSliderMarker :
    DxComplexSettingsComponent<DxRangeSelectorSliderMarker, RangeSelectorSliderMarkerModel>,
    IModelProvider<FontSettingsModel>,
    IModelProvider<TextFormatSettingsModel>

Remarks

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

Add a DxRangeSelectorSliderMarker object to the DxRangeSelector component markup to configure settings of slider markers.

Show Nested Component Structure

DxRangeSelector
- DxRangeSelectorSliderMarker
  - DxFontSettings
  - DxTextFormatSettings

Component-Level Settings

The DxRangeSelectorSliderMarker component allows you to use the following properties at the component level:

VisibleSpecifies whether slider markers are visible. Set this property to false to hide markers.PaddingLeftRight | PaddingTopBottomConfigure paddings between marker edges and its content.PlaceholderHeightReserves an area for a slider marker.ColorSpecifies the color of slider markers.InvalidRangeColorSpecifies the color of slider markers that indicate an invalid range.

Nested Objects

In addition to component-level settings, you can also add the following objects to the DxRangeSelectorSliderMarker component markup:

DxFontSettingsContains the element’s font settings.DxTextFormatSettingsContains the element’s format settings.

Example

The following code snippet customizes slider markers in the <DxRangeSelector> component:

razor

<DxRangeSelector Width="1000px"
                 Height="400px"
                 SelectedRangeStartValue="@(new DateTime(2024, 2, 1))"
                 SelectedRangeEndValue="@(new DateTime(2024, 2, 14))">
    <DxRangeSelectorSliderMarker PaddingLeftRight="5"
                                 PaddingTopBottom="10"
                                 Color="#28a745">
        <DxFontSettings Weight="600" />
        <DxTextFormatSettings Type="TextFormat.ShortDate" />
    </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>

Implements

Inheritance

Object ComponentBase DxSettingsComponent<DevExpress.Blazor.Internal.RangeSelectorSliderMarkerModel> DxComplexSettingsComponent<DxRangeSelectorSliderMarker, DevExpress.Blazor.Internal.RangeSelectorSliderMarkerModel> DxRangeSelectorSliderMarker