blazor-use-devextreme-slider/BlazorSlider/Components/Pages/Index.razor at c3a05bea0e4d8cec35bd6af526b95a0c68fdbf0c · DevExpress-Examples/blazor-use-devextreme-slider · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
@page "/"
@rendermode InteractiveServer

@using BlazorSlider.Components.Slider

<div>
    <DxFormLayout CssClass="slider-fl" ItemCaptionAlignment="ItemCaptionAlignment.All">
        <DxFormLayoutGroup ColSpanXs="12">
            <Items>
                <DxFormLayoutItem ColSpanXs="12" Caption="Default mode">
                    <DxSlider T="int" MinValue="0" MaxValue="100" Value="90" />
                </DxFormLayoutItem>
                <DxFormLayoutItem ColSpanXs="12" Caption="Labels Enabled">
                    <DxSlider T="int" MinValue="0" MaxValue="100" Value="50">
                        <DxSliderLabelSettings Visible="true"
                                               Position="VerticalEdge.Top" />
                    </DxSlider>
                </DxFormLayoutItem>
                <DxFormLayoutItem ColSpanXs="12" Caption="Tooltips Enabled">
                    <DxSlider T="int" MinValue="0" MaxValue="100" Value="35">
                        <DxSliderTooltipSettings Enabled="true"
                                                 ShowMode="TooltipShowMode.Always"
                                                 Position="VerticalEdge.Bottom" />
                    </DxSlider>
                </DxFormLayoutItem>
                <DxFormLayoutItem ColSpanXs="12" Caption="Range Highlight Disabled">
                    <DxSlider T="int" MinValue="0" MaxValue="100"
                              Value="20" ShowRange="false" />
                </DxFormLayoutItem>
                <DxFormLayoutItem ColSpanXs="12" Caption="Discrete Step Enabled">
                    <DxSlider T="int" MinValue="0" MaxValue="100" Value="10" Step="10">
                        <DxSliderTooltipSettings Enabled="true" />
                    </DxSlider>
                </DxFormLayoutItem>
                <DxFormLayoutItem ColSpanXs="12" Caption="Disabled Mode">
                    <DxSlider T="int" MinValue="0" MaxValue="100"
                              Value="50" Enabled="false" />
                </DxFormLayoutItem>
            </Items>
        </DxFormLayoutGroup>
        <DxFormLayoutGroup Caption="Process Value Changes" ColSpanXs="12">
            <Items>
                <DxFormLayoutItem ColSpanXs="12" Caption="On handle movement">
                    <DxSlider @bind-Value="SliderValue" MinValue="0" MaxValue="100"
                              ValueChangeMode="SliderValueChangeMode.OnHandleMove" />
                </DxFormLayoutItem>
                <DxFormLayoutItem ColSpanXs="12" Caption="On handle release">
                    <DxSlider @bind-Value="SliderValue" MinValue="0" MaxValue="100"
                              ValueChangeMode="SliderValueChangeMode.OnHandleRelease" />
                </DxFormLayoutItem>
                <DxFormLayoutItem ColSpanXs="12" Caption="Slider value">
                    <DxSpinEdit @bind-Value="SliderValue" />
                </DxFormLayoutItem>
            </Items>
        </DxFormLayoutGroup>
    </DxFormLayout>
</div>

@code{
    double SliderValue { get; set; } = 15;
}