Skip to main content
All docs
V25.1
  • DxRangeSelectorScaleLabel Class

    Contains settings for scale labels.

    Namespace: DevExpress.Blazor

    Assembly: DevExpress.Blazor.v25.1.dll

    NuGet Package: DevExpress.Blazor

    Declaration

    public class DxRangeSelectorScaleLabel :
        DxComplexSettingsComponent<DxRangeSelectorScaleLabel, RangeSelectorScaleLabelModel>,
        IModelProvider<FontSettingsModel>,
        IModelProvider<TextFormatSettingsModel>

    Remarks

    Add a DxRangeSelectorScaleLabel object to the DxRangeSelectorScale component markup to configure scale label settings in DxRangeSelector.

    Range Selector - Scale Labels

    Show Nested Component Structure

    Component-Level Settings

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

    Visible
    Specifies whether scale labels are visible. Set this property to false to hide labels.
    Overlap
    Specifies how the <DxRangeSelector> component resolves scale label overlapping.
    TopIndent
    Specifies the indent between scale labels and the scale’s bottom edge.

    Nested Objects

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

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

    Example

    The following code snippet configures scale labels in the <DxRangeSelector> component:

    Range Selector - Scale Label Customization

    <DxRangeSelector Width="100%"
                     ValueChanged="@OnValueChanged"
                     ValueChangeMode="RangeSelectorValueChangeMode.OnHandleMove">
        <DxTitleSettings Text="Filter Order List by Total Cost" />
        <DxRangeSelectorScale StartValue="@minTotal"
                              EndValue="@maxTotal">
            <DxRangeSelectorScaleLabel TopIndent="0">
                <DxFontSettings Weight="600" Color="#5f368d" Size="14"/>
                <DxTextFormatSettings Currency="USD" Type="TextFormat.Currency" />
            </DxRangeSelectorScaleLabel>
        </DxRangeSelectorScale>
        <DxRangeSelectorSliderMarker>
            <DxTextFormatSettings LdmlString=",##0" />
        </DxRangeSelectorSliderMarker>
    </DxRangeSelector>
    

    Run Demo

    Inheritance

    Object
    ComponentBase
    DxSettingsComponent<DevExpress.Blazor.Internal.RangeSelectorScaleLabelModel>
    DxComplexSettingsComponent<DxRangeSelectorScaleLabel, DevExpress.Blazor.Internal.RangeSelectorScaleLabelModel>
    DxRangeSelectorScaleLabel
    See Also