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

DxRangeSelectorSliderHandle Class

Contains appearance settings for slider handles.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

#Declaration

C#
public class DxRangeSelectorSliderHandle :
    DxSettingsComponent<RangeSelectorSliderHandleModel>

#Remarks

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

Range Selector - Sliders

Add a DxRangeSelectorSliderHandle object to the DxRangeSelector component markup to customize the appearance of slider handles.

Show Nested Component Structure

The DxRangeSelectorSliderHandle component allows you to customize the color, opacity, and width of slider handles.

Range Selector - Slider Handle Customization

Razor
<DxRangeSelector Width="1000px"
                 Height="400px"
                 SelectedRangeStartValue="@(new DateTime(2024, 2, 1))"
                 SelectedRangeEndValue="@(new DateTime(2024, 2, 14))">
    <DxRangeSelectorSliderHandle Color="#28a745"
                                 Opacity="0.8"
                                 Width="3" />
    <DxRangeSelectorSliderMarker>
        <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>

#Inheritance

Object
ComponentBase
DxSettingsComponent<DevExpress.Blazor.Internal.RangeSelectorSliderHandleModel>
DxRangeSelectorSliderHandle
See Also