DxRangeSelectorScaleLabel Class

Contains settings for scale labels.

Assembly : DevExpress.Blazor.v25.2.dll

Declaration

csharp

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.

Show Nested Component Structure

DxRangeSelector
- DxRangeSelectorScale
  - DxRangeSelectorScaleLabel
    - DxFontSettings
    - DxTextFormatSettings

Component-Level Settings

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

VisibleSpecifies whether scale labels are visible. Set this property to false to hide labels.OverlapSpecifies how the <DxRangeSelector> component resolves scale label overlapping.TopIndentSpecifies 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:

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

Example

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

razor

<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

Implements

Inheritance

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