atomui/samples/AtomUI.Demo.Desktop/ShowCase/SliderShowCase.axaml

<UserControl
    x:Class="AtomUI.Demo.Desktop.ShowCase.SliderShowCase"
    xmlns="https://github.com/avaloniaui"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:atom="https://atomui.net"
    xmlns:showcase="clr-namespace:AtomUI.Demo.Desktop.ShowCase"
    mc:Ignorable="d">
    <showcase:ShowCasePanel>
        <showcase:ShowCaseItem
            Title="Basic"
            Description="Basic slider. When range is true, display as dual thumb mode. When disable is true, the slider will not be interactable.">
            <StackPanel Orientation="Vertical" Spacing="20">
                <atom:Slider
                    Maximum="100"
                    Minimum="0"
                    TickFrequency="5"
                    IsEnabled="{Binding NormalEnabled}"
                    Value="50"/>
        
                <atom:Slider
                    Maximum="100"
                    Minimum="0"
                    IsRangeMode="True"
                    TickFrequency="5"
                    IsEnabled="{Binding NormalEnabled}"
                    RangeValue="20, 80"/>
                <atom:Slider
                    Maximum="100"
                    Minimum="0"
                    IsEnabled="{Binding NormalEnabled}"
                    IsRangeMode="True"
                    TickFrequency="5"
                    Marks="{Binding SliderMarks}"
                    RangeValue="20, 80" />
                
                <StackPanel Orientation="Horizontal" Spacing="2">
                    <TextBlock>Disabled:</TextBlock>
                    <atom:ToggleSwitch SizeType="Small" IsChecked="{Binding NormalEnabled}"/>
                </StackPanel>
            </StackPanel>
        </showcase:ShowCaseItem>
        
        <showcase:ShowCaseItem
            Title="Customize tooltip"
            Description="Use tooltip.formatter to format content of Tooltip. If tooltip.formatter is null, hide it.">
            <StackPanel Orientation="Vertical" Spacing="20">
                <atom:Slider
                    Maximum="100"
                    Minimum="0"
                    TickFrequency="1"
                    IsSnapToTickEnabled="True"
                    ValueFormatTemplate="\{0\}%"
                    Value="20"/>
            </StackPanel>
        </showcase:ShowCaseItem>
        
        <showcase:ShowCaseItem
            Title="Vertical"
            Description="The vertical Slider.">
            <StackPanel Orientation="Horizontal" Spacing="20" Height="300">
                <atom:Slider
                    Maximum="100"
                    Minimum="0"
                    Orientation="Vertical"
                    TickFrequency="1"
                    Value="20"/>
                <atom:Slider
                    Maximum="100"
                    Minimum="0"
                    Orientation="Vertical"
                    TickFrequency="5"
                    IsRangeMode="True"
                    RangeValue="20, 80"
                    IsSnapToTickEnabled="True"
                    Value="20"/>
                
                <atom:Slider
                    Maximum="100"
                    Minimum="0"
                    Orientation="Vertical"
                    TickFrequency="1"
                    Marks="{Binding SliderMarks}"
                    Value="20"/>
                
                <atom:Slider
                    Maximum="100"
                    Minimum="0"
                    IsRangeMode="True"
                    Orientation="Vertical"
                    TickFrequency="5"
                    Marks="{Binding SliderMarks}"
                    RangeValue="20, 80" />
                
            </StackPanel>
        </showcase:ShowCaseItem>
        
        <showcase:ShowCaseItem
            Title="Graduated slider"
            Description="Using marks property to mark a graduated slider, use value or defaultValue to specify the position of thumb.
            When included is false, means that different thumbs are coordinative. when step is null, users can only slide the thumbs onto marks.">
            <StackPanel Orientation="Vertical" Spacing="20">
                <TextBlock FontWeight="Bold">included=true</TextBlock>
                <atom:Slider
                    Maximum="100"
                    Minimum="0"
                    TickFrequency="1"
                    Marks="{Binding SliderMarks}"
                    Value="20"/>
        
                <atom:Slider
                    Maximum="100"
                    Minimum="0"
                    IsRangeMode="True"
                    TickFrequency="5"
                    Marks="{Binding SliderMarks}"
                    RangeValue="20, 80" />
        
                <TextBlock FontWeight="Bold">included=false</TextBlock>
                <atom:Slider
                    Maximum="100"
                    Minimum="0"
                    TickFrequency="1"
                    Marks="{Binding SliderMarks}"
                    Included="False"
                    Value="20"/>
        
                <atom:Slider
                    Maximum="100"
                    Minimum="0"
                    IsRangeMode="True"
                    TickFrequency="5"
                    Included="False"
                    Marks="{Binding SliderMarks}"
                    RangeValue="20, 80" />
        
            </StackPanel>
        </showcase:ShowCaseItem>
    </showcase:ShowCasePanel>
</UserControl>