DxRangeSelectorSliderMarker Class

Contains settings for slider markers.

Assembly: DevExpress.Blazor.v24.2.dll

Declaration

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.

Range Selector - Sliders

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:

Visible: Specifies whether slider markers are visible. Set this property to false to hide markers.
PaddingLeftRight | PaddingTopBottom: Configure paddings between marker edges and its content.
PlaceholderHeight: Reserves an area for a slider marker.
Color: Specifies the color of slider markers.
InvalidRangeColor: Specifies 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:

DxFontSettings: Contains the element’s font settings.
DxTextFormatSettings: Contains the element’s format settings.

Example

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

Range Selector - Slider Marker Customization

<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>