Skip to main content
All docs
V25.1
  • DxRangeSelectorSliderMarker.InvalidRangeColor Property

    Specifies the color of slider markers that indicate an invalid range.

    Namespace: DevExpress.Blazor

    Assembly: DevExpress.Blazor.v25.1.dll

    NuGet Package: DevExpress.Blazor

    Declaration

    [DefaultValue("red")]
    [Parameter]
    public string InvalidRangeColor { get; set; }

    Property Value

    Type Default Description
    String "red"

    The color of slider markers.

    Remarks

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

    Range Selector - Sliders

    When the selected range falls out of a predefined range, slider markers change their color. To specify the slider marker color in this case, use the InvalidRangeColor property.

    The InvalidRangeColor property accepts the following formats:

    • Longhand and shorthand hexadecimal color values: #ffff00, #ff0.
    • RGB and RGBA color codes: rgb(255, 0, 0), rgba(0, 230, 0, 0.3).
    • HTML color name (case-insensitive): red, DarkGreen.

    Range Selector - Invalid Range Color

    <DxRangeSelector Width="1000px"
                     Height="400px"
                     SelectedRangeStartValue="@(new DateTime(2024, 2, 1))"
                     SelectedRangeEndValue="@(new DateTime(2024, 2, 14))">
        <DxRangeSelectorSliderMarker InvalidRangeColor="#888">
            <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