Skip to main content
All docs
V24.2

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

DxRangeSelectorScaleLabel Class

Contains settings for scale labels.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

#Declaration

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

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

#Inheritance

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