DxRangeSelectorScaleLabel Class

Contains settings for scale labels.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.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.

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:

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:

<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

IComponent

IHandleEvent

IHandleAfterRender

IDisposable

Inheritance

Object

ComponentBase

DxSettingsComponent<DevExpress.Blazor.Internal.RangeSelectorScaleLabelModel>

DxComplexSettingsComponent<DxRangeSelectorScaleLabel, DevExpress.Blazor.Internal.RangeSelectorScaleLabelModel>

DxRangeSelectorScaleLabel